脉冲加载器
使用 animation-delay
属性创建一个脉冲效果的加载器动画。
- 使用
@keyframes
定义一个动画的两个关键帧。在开始时(0%
),两个<div>
元素没有width
或height
,并且位于中心位置。在结束时(100%
),两个<div>
元素的width
和height
增加,但它们的position
被重置为0
。 - 使用
opacity
在动画过程中从1
过渡到0
,以给<div>
元素一个消失的效果。 - 为父容器
.ripple-loader
设置预定义的width
和height
,并使用position: relative
来定位其子元素。 - 在第二个
<div>
元素上使用animation-delay
,使得每个元素在不同的时间开始动画。
<div class="ripple-loader">
<div></div>
<div></div>
</div>
.ripple-loader {
position: relative;
width: 64px;
height: 64px;
}
.ripple-loader div {
position: absolute;
border: 4px solid #454ADE;
border-radius: 50%;
animation: ripple-loader 1s ease-out infinite;
}
.ripple-loader div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes ripple-loader {
0% {
top: 32px;
left: 32px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0;
left: 0;
width: 64px;
height: 64px;
opacity: 0;
}
}