zoukankan      html  css  js  c++  java
  • css3+jQuery实现按钮水波纹效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>水波纹按钮</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <style>
    /*自定义按钮样式*/
    .btns{ height: 30px; line-height: 30px; text-align: center; width: 200px; color: #fff; background-color: #428bca; margin: 50px auto; } /*必要样式*/ .water-btn{ position: relative; overflow: hidden; } .wb-click{ position: absolute; z-index: 2; width: 100%; height: 100%; top:0px; left: 0px; } .water-btn .wb-world{ position: relative;; z-index: 1; } .water-btn .water-btn-style{ position:absolute; border-radius:100%;
      opacity:.6; background:#fff; animation:waterBtn 3s; -webkit-animation:waterBtn 3s; /* Safari and Chrome */ transform: translate(-50%, -50%) scale(1); } @keyframes waterBtn { 0% { width:0px; height:0px; } 50% { width:1000px; height:1000px; opacity:0 } 100%{ opacity:0 } } @-webkit-keyframes waterBtn /* Safari and Chrome */ { 0% { width:0px; height:0px; } 50% { width:1000px; height:1000px; opacity:0 } 100%{ opacity:0 } } </style> </head> <body> <!-- domo data-clickColor是水波纹的颜色;可以是#xxxxxx的形式,也可以是rgba()的形式 -->
    <div class="water-btn btns" data-clickColor="rgba(255,255,255,.5)">
        <div class="wb-click"></div>
        <div class="wb-world">这里是一个按钮</div>
    </div>
    
    
    <script src="js/jquery.min.js"></script>
    <script>
    $(function(){
        $('.water-btn').click(function(e){
            var _this = $(this);
            var px = e.offsetX;
            var py = e.offsetY;
    
            var id=parseInt(Math.random()*1000);
            _this.append('<div class="water-btn-style" style="top:'+py+'px;left:'+px+'px;background:'+_this.attr('data-clickColor')+'" id="wb_'+id+'"></div>');
            setTimeout(function(){
                _this.find('#wb_'+id).remove()
            },3000)
        });
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    mysql查看执行sql语句的记录日志
    Java 装箱和拆箱
    Oracle导入的常见语句
    static与非static的区别
    nginx 常用命令
    linux sed 替换文件中的字符串
    linux 创建文件并写好内容
    Xshell连接docker centos 7
    按任意键开始、结束
    低配docker命令
  • 原文地址:https://www.cnblogs.com/wwlhome/p/6187369.html
Copyright © 2011-2022 走看看