css之简易水波效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 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
- 谈谈
这个只是简单的想法，基础版本，样式和逻辑分离，只是简单实现了效果。
后期准备使用面向对象的写法完成，将水波的大小、颜色、范围、过渡等效果进行开发者自定义，或许会加入更多的效果:)