您的位置：首页 > Web前端 > CSS

css3按钮波纹效果

2016-12-09 16:08 288 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航