css的水波浪效果没关系。取得了一个小小的效果。发布它来分享和分享。我们先来看看效果。代码：root{background:#ddd;}body{position:relative;}ripper{width:50px;高度：50px；背景：rgba(0,0,0,.1)；边界半径：50%；位置：绝对；动画：移动.3s；}@keyframes移动{0%{变换：缩放（0）；}49%{变换：缩放（1）；}51%{变换：比例（1）；}100%{变换：缩放（0）；}}window.addEventListener("click",function(e){if(closeTimer){clearTimeout(closeTimer);}vare=event||e;varx=e.clientX,y=e.clientY;varTop=y-25-8,Left=x-25-8;varripper=document.createElement("ripper");ripper.style.top=Top+"px";ripper.style.left=Left+"px";文档。getElementsByTagName("body")[0].appendChild(ripper);varcloseTimer=setTimeout(function(){document.getElementsByTagName("body")[0].removeChild(ripper);},250)})备注：有坑点是没有html步骤varcloseTimer必须在click事件内部生成，会造成固定时间在scope之外定时器关闭混乱，清除不成功问题内存混乱BOM对象：网页可见区域：document.body.clientWidth/clientHeight说说这个只是简单的思路，基础版，样式逻辑分离，效果只是实现了。后期会采用面向对象的编写方式完成准备，水波的大小、颜色、范围、过渡等效果由开发者自定义，可能会添加更多效果:)
