css html写水波,css之简易水波效果

上代码

: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