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

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(