前端小项目4 # ButtonRippleEffect 按钮点击涟漪效果

介绍

ButtonRippleEffect 点击按钮产生水波涟漪效果。

本练习涉及的知识点

1. 鼠标事件
2. HTML中鼠标点击的坐标信息
3. JS操作DOM节点
4. JS操作class属性
5. animation 动画
6. transform 转换
7. 鼠标连续点击同一个位置时offsetX/offsetY不一样
   （参考：https://www.cnblogs.com/paul-xiao/p/14539039.html）

代码

HTML:

<div class="ripple-btn">click me 1</div>
<div class="ripple-btn">click me 2</div>

CSS:

 body{
     display: flex;
     align-items: center;
     height: 100vh;
     justify-content: center;
     background-color: #000;
 }
 .ripple-btn{
     width: 150px;
     height: 80px;
     background-color: purple;
     text-align: center;
     font-size: 20px;
     line-height: 80px;
     border: 0px;
     color: #fff;
     cursor: pointer;
     overflow: hidden;
     position: relative;
     user-select: none;
     margin: 0 10px;
 }
 .ripple{
     width: 100px;
     height: 100px;
     background-color: #fff;
     position: absolute;
     border-radius: 50%;
     transform: translate(-50%,-50%) scale(0);
     animation: grow 0.5s ease-in;
 }
 @keyframes grow {
     to{
         transform: translate(-50%,-50%) scale(3);
         opacity: 0;
     }
 }

JavaScript:

 let btns = document.querySelectorAll(".ripple-btn")
 btns.forEach(btn => {
     btn.addEventListener("click",(event)=>{
         const e = event || window.event
         const rect = e.currentTarget.getBoundingClientRect()
         
         let top = `${e.clientY-rect.top}px`
         let left = `${e.clientX-rect.left}px`
         
         const ripple = document.createElement("i")
         ripple.classList.add("ripple")
         ripple.style.left = left
         ripple.style.top = top
         btn.appendChild(ripple)

         setTimeout(()=>{
             ripple.remove()
         },500)
     })
 });