简介
在这个实验中,我们将通过创建一个弹跳加载动画来探索CSS动画的世界。这个实验旨在帮助你理解如何使用 @keyframes
来定义动画,如何使用CSS将动画应用于元素,以及如何控制动画的时间和方向。在本实验结束时,你将对如何使用CSS创建引人入胜的动态动画有更深入的理解。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在这个实验中,我们将通过创建一个弹跳加载动画来探索CSS动画的世界。这个实验旨在帮助你理解如何使用 @keyframes
来定义动画,如何使用CSS将动画应用于元素,以及如何控制动画的时间和方向。在本实验结束时,你将对如何使用CSS创建引人入胜的动态动画有更深入的理解。
虚拟机中已经提供了 index.html
和 style.css
。
要创建一个弹跳加载器动画:
@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
以创建适当的效果。以下是HTML代码:
<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
以下是CSS代码:
@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;
}
请点击右下角的“Go Live”以在端口8080上运行Web服务。然后,你可以刷新“Web 8080”标签页来预览网页。
恭喜你!你已经完成了弹跳加载器实验。你可以在LabEx中练习更多实验来提升你的技能。