上代码
:root{
background: #ddd;
}
body{
position: relative;
}
ripper{
width: 50px;
height: 50px;
background: rgba(0,0,0,.1);
border-radius: 50%;
position: absolute;
animation: move .3s;
}
@keyframes move{
0%{
transform: scale(0);
}
49%{
transform: scale(1);
}
51%{
transform: scale(1);
}
100%{
transform: scale(0);
}
}
window.addEventListener("click",function(e){
if(closeTimer){
clearTimeout(closeTimer);
}
var e = event||e;
var x = e.clientX,y = e.clientY;
var Top = y-25-8,Left = x-25-8;
var ripper = document.createElement("ripper");
ripper.style.top = Top+"px";
ripper.style.left = Left+"px";
document.getElementsByTagName("body")[0].appendChild(ripper);
var closeTimer = setTimeout(function(){
document.getElementsByTagName("body")[0].removeChild(ripper);
},250)
})
备注:木有html