版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_38426472/article/details/80138329
css之水波效果
没事实现了一个小效果,贴上来分享分享
- 先看看效果
- 上代码
```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);
}
}
```
```js
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
- 踩坑点
1. var closeTimer必须在点击事件内部生成,在作用域外面会造成定时器关闭混乱,清除不成功的问题
2. 记忆混淆的BOM对象:网页可见区域: document.body.clientWidth/clientHeight
- 谈谈
这个只是简单的想法,基础版本,样式和逻辑分离,只是简单实现了效果。
后期准备使用面向对象的写法完成,将水波的大小、颜色、范围、过渡等效果进行开发者自定义,或许会加入更多的效果:)