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);
      }
  }

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