超好的水波纹效果
html
<a class="home_user_head" href="javascript:;"> <img src="//static.eimoney.com/diamonds/mobile/imoney_v6/img/iMoneyNewLogoColor.png"> </a>
css:
.home_user_head {
display: inline-block;
position: absolute;
top: 10px;
left: 10px;
width: 30px;
height: 30px;
box-shadow: 0px 0px 0px 2px rgba(255,255,255,0.2);
-webkit-border-radius: 50%;
overflow: hidden;
/* background-image: url(); */
background-size: cover;
-webkit-animation: home_user_head_ripple 0.5s linear infinite;
animation: home_user_head_ripple 0.5s linear infinite;
}
@keyframes home_user_head_ripple {
0% {
box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1), 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0);
}
}
<a class="home_user_head" href="javascript:;">
<img src="//static.eimoney.com/diamonds/mobile/imoney_v6/img/iMoneyNewLogoColor.png">
</a>