css涟漪点击效果(此博客仅供个人记录使用)

第一种：纯css实现：

.ripple {
    position: relative;
    overflow: hidden;
}
.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
}
.ripple:active:after {
    transform: scale(0, 0);
    opacity:.3;
    transition: 0s;
}

给需要的标签添加class为ripple搞定 ，但是你会发现效果不佳 每次都从中间往外的位置扩张的效果 ，能不能冲鼠标点击的地方往外呢，就要集合js实现，（第二种实现）；

 

 

　　

第二种方法：css + js 实现：（Material-UI效果）

css部分：

.ripple{
    background: #1ABC9C;
　　 width:100%;
　　 height:100px;

    color: #fff; 
    position:relative;
    cursor:pointer;
    display:inline-block;
    overflow:hidden;
    text-align: center;
    -webkit-tap-highlight-color:transparent;
    z-index:1;
}
.ripple .ripple-animation{
    position:absolute;
    border-radius:50%;
    width:25px;
    height:25px;
    opacity:0;
    background:rgba(255,255,255,0.3);
    transition:all 0.7s ease-out;
    transition-property:transform, opacity, -webkit-transform;
    -webkit-transform:scale(0);
    transform:scale(0);
    pointer-events:none
}

 

　js:部分：

<script>
     // 点击涟漪效果
     document.addEventListener('DOMContentLoaded',function(){
          let duration = 750;
          // 样式string拼凑
          let forStyle = function(position){
            let cssStr = ''
              for( let key in position){
                  // if(position.hasOwnProperty(key)){ 
                      cssStr += key+':'+position[key]+';'
                  // }
              }
              return cssStr;
          }
          // 获取鼠标点击位置
          let forRect = function(target){
            let position = {
              top:0,
              left:0
            }
            let ele = document.documentElement
              typeof target.getBoundingClientRect != 'undefined'  && (position = target.getBoundingClientRect())
              return {
                  top: position.top + window.pageYOffset - ele.clientTop,
                  left: position.left + window.pageXOffset - ele.clientLeft
              }
          }

          let show = function(event){
              let pDiv = event.target
              let cDiv = document.createElement('div');
                  pDiv.appendChild(cDiv)
              let rectObj = forRect(pDiv)
              let height = event.pageY - rectObj.top
              let left = event.pageX - rectObj.left
              let scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')'
              let position = {
                  top: height+'px',
                  left: left+'px'
              }
              

              cDiv.className = cDiv.className + " ripple-animation",
                  cDiv.setAttribute("style", forStyle(position)),
                  position["-webkit-transform"] = scale,
                  position["-moz-transform"] = scale,
                  position["-ms-transform"] = scale,
                  position["-o-transform"] = scale,
                  position.transform = scale,
                  position.opacity = "1",
                  position["-webkit-transition-duration"] = duration + "ms",
                  position["-moz-transition-duration"] = duration + "ms",
                  position["-o-transition-duration"] = duration + "ms",
                  position["transition-duration"] = duration + "ms",
                  position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                  position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                  position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                  position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
                  cDiv.setAttribute("style", forStyle(position))


                  let finishStyle = {
                      opacity: 0,
                      "-webkit-transition-duration": duration + "ms",
                      "-moz-transition-duration": duration + "ms",
                      "-o-transition-duration": duration + "ms",
                      "transition-duration": duration + "ms",
                      "-webkit-transform" : scale,
                      "-moz-transform" : scale,
                      "-ms-transform" : scale,
                      "-o-transform" : scale,
                      top: height + "px",
                      left: left + "px",
                  }



              setTimeout(() => {
                  cDiv.setAttribute("style", forStyle(finishStyle))
                  setTimeout(() =>  pDiv.removeChild(cDiv),duration)
              },100)
          }

            for (let i = 0; i < document.querySelectorAll('.ripple').length; i++) {
              document.querySelectorAll('.ripple')[i].addEventListener('click',function(e){
                  show(e)
              })   
            }
          // addEventListener('click',function(e){
          //   let target = e.target.classList
          //   if (target && target.length) {
          //     for (let i = 0; i < target.length; i++) {
          //       (target[i] === 'ripple') && show(e)
          //     }
          //   } 
          // })
      })
  </script>

然后在所需要点击效果的标签上加上class="ripple"就可以了