css3+jQuery實現按鈕水波紋效果

時間 2019-12-11

標籤 css3+jquery css jquery 實現按鈕波紋效果欄目 CSS 简体版

原文原文鏈接

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。