// html
<div class="animation"></div>
// JavaScript
.animation {
position: relative;
width: 10px;
height: 10px;
background: #409eff;
border-radius: 50%;
&:after {
content: '';
position: absolute;
top: -5px;
left: -5px;
width: 100%;
height: 100%;
border: 5px solid #ff1883;
border-radius: 50%;
animation: antStatusProcessing 1.2s ease-in-outinfinite;
}
}
@-webkit-keyframes antStatusProcessing {
0% {
-webkit-transform: scale(.8);
transform: scale(.8);
opacity: .5
}
to {
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0
}
}
@keyframes antStatusProcessing {
0% {
-webkit-transform: scale(.8);
transform: scale(.8);
opacity: .5
}
to {
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0
}
}
CSS实现水波纹扩散动画
阿里云限时活动-云数据库 RDS MySQL 1核2G配置 1.88/月 速抢
本文由乐趣区整理发布,转载请注明出处,谢谢。