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
• 談談這個只是簡單的想法，基礎版本，樣式和邏輯分離，只是簡單實現了效果。後期準備使用面向對象的寫法完成，將水波的大小、顏色、範圍、過渡等效果進行開發者自定義，或許會加入更多的效果:)