css3按钮波纹效果

最新推荐文章于 2024-05-27 11:09:28 发布

往地上就是一躺

最新推荐文章于 2024-05-27 11:09:28 发布

阅读量3.4k

点赞数 1

本文链接：https://blog.csdn.net/u014798510/article/details/53540441

版权

<!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>

效果：
这里写图片描述
例子链接：http://pan.baidu.com/s/1sl6ejKx

往地上就是一躺

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3按钮波纹效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 200px; height: 60px; margin: 50px auto;
复制链接

扫一扫