Web常用的涟漪按钮特效

最新推荐文章于 2022-05-28 15:01:00 发布

路克森

最新推荐文章于 2022-05-28 15:01:00 发布

阅读量566

点赞数 2

分类专栏：整合问题案例文章标签： html javascript css css3

本文链接：https://blog.csdn.net/qq_39057639/article/details/106996664

版权

整合问题案例专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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

视频教程地址

微信搜索阿祥说公众号关注获取更多资料可课程~
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Button</title>
    <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>

路克森

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web常用的涟漪按钮特效

下面是实现代码效果图点击会有个涟漪效果可以保存一下代码查看一下视频教程地址微信搜索阿祥说公众号关注获取更多资料可课程~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Button</title> <style type="text/css"> *{
复制链接

扫一扫