圆角按钮div边框动态效果
07/28
<style>
.ripple-content{
margin:50px;
position: relative;
}
.ripple{
position: absolute;
width:46px;
height:46px;
line-height: 46px;
text-align: center;
background: #333;
color:#FFF;
border-radius: 50%;
}
.ripple-border{
z-index: -1;
opacity:0;
-webkit-transform:scale(1);
transform:scale(1);
-webkit-animation:pan-ripple 1s linear infinite;
animation:pan-ripple 1s linear infinite;
}
@-webkit-keyframes pan-ripple {
0% {-webkit-transform:scale(1);opacity:0;}
30% {-webkit-transform:scale(1.1);opacity:1;}
100% {-webkit-transform:scale(1.3);opacity:0;}
}
</style>
<div class="ripple-content">
<div class="ripple ripple-text">边框</div>
<div class="ripple ripple-border"></div>
</div>效果如下图所示：
版权属于：
Dcr163的博客
本文链接：
http://dcr163.cn/184.html（转载时请注明本文出处及文章链接）
