Web常用的涟漪按钮特效

下面是实现代码 效果图 点击会有个涟漪效果可以保存一下代码查看一下

视频教程地址

微信搜索 阿祥说 公众号 关注获取更多资料可课程~
Web常用的涟漪按钮特效_第1张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Buttontitle>
    <style type="text/css">
          *{
              margin: 0;
              padding: 0;
              font-family: Consolas;
          }

          html,body{
              width:100%;
              height:100%;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
          }

          .btn{
              margin: 10px 0;
              display: inline-block;
              width:100px;
              height:45px;
              background: linear-gradient(90deg,#2af598,#009efd);
              text-transform: uppercase;
              color:#fff;
              text-align: center;
              line-height: 45px;
              border-radius: 40px;
              user-select: none;
              position: relative;
              overflow: hidden;
          }

          .btn:nth-child(2){
              background: linear-gradient(90deg,#a18cd1,#fbc2ed);
          }


          span{
              border-radius: 50%;
              display: inline-block;
              background-color: white;
              position: absolute;
              transform: translate(-50%,-50%);
              animation: tran .6s linear alternate;
          }

          @keyframes  tran{
                0%{
                    width:0;
                    height:0;
                    opacity: .6;
                }
                100%{
                    width:500px;
                    height:500px;
                    opacity: 0;
                }
          }
    style>
head>
<body>
         <a class="btn"> Button a>
         <a class="btn"> Button a>


         <script type="text/javascript">

                 // 获取到按钮集合
              let buttons = document.querySelectorAll(".btn");
                 buttons.forEach(function (btn) {
                     btn.addEventListener("mousedown",function (e) {
                         let span = document.createElement("span");
                         let x = e.clientX - this.offsetLeft;
                         let y = e.clientY - this.offsetTop;
                         span.style['left'] = x + "px";
                         span.style['top'] = y + "px";
                         btn.appendChild(span);
                     });
                 });
         script>
body>
html>

你可能感兴趣的:(整合问题案例)