位置：广州松河 > 技术支持 > css3按钮波纹效果

css3按钮波纹效果

来源：网络整理时间：2023/2/14 0:42:31 共 3679 浏览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
          width: 200px;
          height: 60px;
          margin: 50px auto;
          padding: 5px 0 0 10px;
          position: relative;
        }
        #box .btn{
          width: 150px;
          height: 40px;
          line-height: 40px;
          border-radius: 30px;
          background: #26bfc5;
          cursor: pointer;
          text-align: center;
          color: #fff;
          z-index: 10;
        }
        .dot {
          width: 150px;
          height: 40px;
          top:5px;
          left:10px;
          border-radius: 30px;
          position: absolute;
          z-index: -10;
          animation: sploosh 2s cubic-bezier(0.165, 0.84, 0.44, 1);
          background: transparent;
        }
        @keyframes sploosh {
          0% {
            box-shadow: 0 0 0 0px rgba(38, 191, 197, 0.5);
            background: rgba(38, 191, 197, 0.5);
          }
          100% {
            box-shadow: 0 0 0 20px rgba(38, 191, 197, 0);
            background: rgba(38, 191, 197, 0);
          }
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="btn">点击</div>
    </div>

    <script src="js/jquery-1.12.3.min.js"></script>
    <script>
        $(function(){
            $("#box .btn").click(function(){
                    setTimeout(function () {
                        $('#box').append('<div class="dot"></div>')
                    }, 300);
                    setTimeout(function () {
                        $('#box').append('<div class="dot"></div>')
                    }, 0);
                    setTimeout(function () {
                        $('#box .dot').remove();
                    }, 2000);
                });
        })
    </script>
</body>
</html>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：BootstrapFileInput 图片上传插件详解 | ·下一条：按钮动画 - 波纹效果