弹跳加载器
创建一个弹跳加载器动画。
- 使用
@keyframes
定义一个弹跳动画,使用opacity
和transform
属性。使用transform: translate3d()
在单个轴上进行平移,以获得更好的动画性能。 - 创建一个父容器
.bouncing-loader
,用于放置弹跳的圆圈。使用display: flex
和justify-content: center
将它们居中对齐。 - 给三个弹跳圆圈的
<div>
元素设置相同的width
、height
和border-radius: 50%
,使它们呈圆形。 - 将
bouncing-loader
动画应用于每个弹跳圆圈。 - 对于每个圆圈使用不同的
animation-delay
,并使用animation-direction: alternate
创建适当的效果。
<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
@keyframes bouncing-loader {
to {
opacity: 0.1;
transform: translate3d(0, -16px, 0);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > div {
width: 16px;
height: 16px;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}