jquery+css3按鈕水波紋實現

標籤：query   nim   time   hidden   cli   20px   ima   play   分享   

html：

 1 <div class="btn">確定</div> 

css：

 1 @-webkit-keyframes waterripple { 2                 0% { 3                     box-shadow: 0 0 0 0 rgba(66, 166, 223, 0.7); 4                     background: rgba(66, 166, 223, 0.7); 5                 } 6                 100% { 7                     box-shadow: 0 0 0 300px rgba(66, 166, 223, 0); 8                     background: rgba(66, 166, 223, 0); 9                 }10             }        11             .btn {12                 width: 100px;13                 height: 40px;14                 text-align: center;15                 line-height: 40px;16                 border-radius: 5px;17                 background: skyblue;18                 position: relative;19                 overflow: hidden;20                 margin: 20px;21                 float:left;22             }23             24             .wave {25                 display: inline-block;26                 width:50px;27                 height: 50px;28                 border-radius: 100%;29                 position: absolute;30                 margin-top: -25px;31                 margin-left: -25px;32                 animation: waterripple .3s ease-in-out both 1;33                 -webkit-animation: waterripple .3s ease-in-out both 1;34                 background: rgba(66, 166, 223, 0);35             }

js:

$("document").ready(function() {                $(".btn").bind(‘click‘, function(e) {                                        var me=$(this);                    var X = e.pageX - $(this).offset().left;                    var Y = e.pageY - $(this).offset().top;                                        me.append(‘<span class="wave" style="left:‘+X+‘;top:‘+Y+‘;"></span>‘);                                                            setTimeout(function(){                       me.find(‘.wave‘).remove()                    },300);                })            });

效果如下：

jquery+css3按鈕水波紋實現