CSS3打造灵动加载动画，点缀网页视觉盛宴

前端

2023-11-27 15:44:52

CSS3加载动画：让你的网页动起来，焕发活力！

在瞬息万变的网络世界中，用户期望网页加载速度快如闪电。漫长的等待时间会让用户失去耐心，导致网站跳出率飙升。CSS3 加载动画应运而生，它可以让你的网页在加载时展现出动感十足的视觉效果，有效缓解用户焦躁，提升他们的体验。

为什么选择CSS3 加载动画？

纯前端技术： 无需借助第三方库或插件，轻巧简洁。
兼容性强： 支持所有现代浏览器，确保广泛受众覆盖。
易于维护： 代码简洁明了，方便日后的更新和修改。

如何创建CSS3 加载动画？

以下是两种不同风格的CSS3 加载动画的实现指南：

1. 旋转球体动画

旋转球体动画由多个球体组成，在加载过程中不断旋转，营造出一种动感十足的效果。

创建一个球体容器，使用绝对定位来排列球体。
创建多个.ball类名的球体元素，并设置其样式（大小、颜色、位置）。
使用CSS3 的@keyframes规则定义旋转动画，使球体不断旋转。

代码示例：

/* 球体容器 */
.loading-container {
  position: relative;
}

/* 球体 */
.ball {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #3498db;
  position: absolute;
  animation: rotate 2s linear infinite;
}

/* 旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

2. 跳动球体动画

跳动球体动画由一个球体组成，在加载过程中上下跳动，给人一种活泼轻快的视觉感受。

创建一个球体容器，使用绝对定位来居中球体。
创建一个.ball类名的球体元素，并设置其样式（大小、颜色、位置）。
使用CSS3 的animation属性定义跳动动画，使球体上下跳动。

代码示例：

/* 球体容器 */
.loading-container {
  position: relative;
}

/* 球体 */
.ball {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f1c40f;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: jump 1s linear infinite;
}

/* 跳动动画 */
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}