弹跳式CSS动画加载器

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个实验中,我们将通过创建一个弹跳加载动画来探索CSS动画的世界。这个实验旨在帮助你理解如何使用 @keyframes 来定义动画,如何使用CSS将动画应用于元素,以及如何控制动画的时间和方向。在本实验结束时,你将对如何使用CSS创建引人入胜的动态动画有更深入的理解。

弹跳加载器

虚拟机中已经提供了 index.htmlstyle.css

要创建一个弹跳加载器动画:

  1. 定义一个 @keyframes 动画,该动画使用 opacitytransform 属性,并在 transform: translate3d() 上进行单轴平移以获得更好的性能。
  2. 创建一个类名为 .bouncing-loader 的父容器,使用 display: flexjustify-content: center 来使弹跳的圆圈居中。
  3. 为弹跳圆圈的三个 <div> 元素赋予相同的 widthheightborder-radius: 50%,使其成为圆形。
  4. bouncing-loader 动画应用于三个弹跳圆圈中的每一个。
  5. 为每个圆圈使用不同的 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中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程