<div class="button"> <div class="status"></div> </div> <style> .button { width:100px; height:100px; border:1px solid #0D96F2; position:relative; border-radius:50%; overflow:hidden; background:#0D96F2; margin:0 auto; } .button .status { position:absolute; width:250%; height:250%; top:-200%; left:-70%; border-radius:40%; background:white; animation:wave 5s infinite; animation-timing-function:cubic-bezie(.28,.93,.71,.38); } .button:hover .status { transform:scale(1,1); } @keyframes wave { from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } } </style>
使用css3实现一个波动的进度球
我逐你·2020-01-20·701 次阅读
Comments | NOTHING