目录
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(