如何使用CSS制作简单加载动画_keyframes与transform结合

P粉602998670 2025-11-24 00:00:00 次阅读

掌握CSS动画需先理解@keyframes定义动画流程，再结合transform实现旋转、缩放等效果。1. 使用@keyframes设定0%到100%的样式变化，如旋转360度；2. 利用transform的rotate、scale、translate实现动态；3. 创建loader类通过border差异与旋转形成加载圈；4. 制作pulse呼吸效果，用scale在0.8到1.2间缩放。关键细节包括添加infinite使动画持续，选择linear或ease-in-out控制节奏，无需JavaScript即可实现流畅加载动画。

想让网页看起来更流畅，加载动画是个不错的选择。用CSS的 @keyframes 和 transform 能轻松做出简洁又好看的加载效果，不需要JavaScript也能实现。

1. 理解关键帧 @keyframes

@keyframes 是定义动画过程的核心规则。你可以指定某个时间段内元素的样式变化。

比如做一个旋转动画，可以这样写：

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

这段代码表示元素从0度转到360度，形成一圈完整的旋转。

2. 使用 transform 实现动态效果

transform 可以对元素进行旋转、缩放、平移等操作。结合 keyframes，能让动画更生动。

常见用法包括：

rotate()：让元素绕中心点旋转
scale()：改变元素大小，适合做呼吸效果
translate()：移动位置，可模拟跳动或滑入

3. 制作一个简单的旋转加载器

下面是一个实用例子：创建一个不断旋转的圆圈加载动画。

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

这个效果利用了边框颜色差异，只让顶部有颜色，配合旋转就形成了“进度条”式的加载动画。

4. 添加呼吸式缩放动画

如果你想做一个像心跳一样的加载提示，可以用 scale 配合 keyframes。

.pulse {
  width: 20px;
  height: 20px;
  background: #e74c3c;
  border-radius: 50%;
  animation: breathe 1.5s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
}

这个动画会让小圆点反复放大缩小，产生“呼吸”感，适合用于轻量级状态提示。