html+css+js 点击屏幕产生泡泡的效果

原创

已于 2022-03-28 10:52:20 修改 · 897 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #html5

于 2022-03-25 17:12:21 首次发布

本文介绍了如何使用HTML5、CSS3和JavaScript实现一个功能，即当用户点击屏幕时，会在点击位置生成带有动画效果的泡泡。首先，设置body全屏填充，接着获取点击位置并插入带圆角的div，然后添加动画效果，最后在动画结束时删除该div。文章附带了源码分享。

1.效果图

在这里插入图片描述

2.总体思路

1.布局好样式 让body全屏
2.点击页面的位置 获得位置
3.生成div 插入到body 放到点击的哪里
4.给div 添加通用的样式 圆角和定位
5.给div 添加动画
	大小  从小变大
	透明  从不透明1--透明0
	内部的的波澜阴影 慢慢扩大
	div 添加颜色变化的滤镜

6.动画结束后就删除div

2.1让body全屏填充

*{
   
   
  margin: 0;
     padding: 0;
 }
 body{
   
   
     position: relative; /*父相对 子绝对*/
     /*插入body的div 是绝对的定位 会按照body的左上角为参照点*/
     overflow: hidden;
     min-height: 100vh;
     background-color: #333;
 }

2.2点击页面的位置获得位置

获得 body和document元素
var docu=document.documentElement;
var mes=document.querySelector("body");
docu.onclick=function(event){
   
   
    //获得鼠标点击的位置
    //点击的水平方向
    var X=event.clientX
    //点击的垂直方向
    var Y=event.clientY
}

2.3生成div 插入到body 放到点击的哪里

//创建一个元素div
var pao=document.createElement

最低0.47元/天解锁文章