CSS如何制作旋转加载动画？@keyframes关键帧-css教程-PHP中文网

答案是利用@keyframes和transform: rotate()创建旋转动画，通过border差异形成动态缺口，配合animation实现持续旋转；优化可采用linear时间函数、GPU加速（如translateZ或will-change）以提升流畅度；自定义可通过调整animation-duration、颜色、尺寸等属性实现；项目中推荐使用CSS变量、组件化封装和工具类提高复用性，并添加role="status"、aria-live="polite"及sr-only文本增强可访问性。

css如何制作旋转加载动画？@keyframes关键帧

在CSS里制作旋转加载动画，最核心的思路就是利用

@keyframes

登录后复制

规则配合

transform: rotate()

登录后复制

属性，让一个带有部分边框的圆形元素持续旋转起来。这就像我们小时候玩陀螺，给它一个初始的力，它就能自顾自地转起来，直到力尽为止。而CSS动画，就是我们给这个陀螺注入的“永恒的力”。

解决方案

要实现一个经典的旋转加载动画，我们通常会创建一个简单的HTML元素，比如一个

div

登录后复制

，然后用CSS赋予它圆形的外观和旋转的生命。

首先，HTML部分可以非常简洁：

<div class="loader"></div>

登录后复制

接着是CSS，这是魔法发生的地方：

立即学习“前端免费学习笔记（深入）”；

.loader {
    width: 50px; /* 宽度和高度相同，确保是正方形 */
    height: 50px;
    border: 4px solid #f3f3f3; /* 浅灰色背景边框 */
    border-top: 4px solid #3498db; /* 蓝色旋转部分 */
    border-radius: 50%; /* 变成圆形 */
    animation: spin 1s linear infinite; /* 应用动画：动画名、持续时间、速度曲线、重复次数 */
}

@keyframes spin {
    0% {
        transform: rotate(0deg); /* 动画开始时旋转0度 */
    }
    100% {
        transform: rotate(360deg); /* 动画结束时旋转360度，完成一圈 */
    }
}

登录后复制

这段代码的核心在于

.loader

登录后复制

的

border

登录后复制

和

border-top

登录后复制

属性，它们共同创造了一个“缺口”的视觉效果，然后

@keyframes spin

登录后复制

则负责让这个缺口围绕中心点不断旋转。

animation: spin 1s linear infinite;

登录后复制

这一行是关键，它把

@keyframes spin

登录后复制

定义的动画规则应用到

.loader

登录后复制

元素上，让它在1秒内完成一圈（

linear

登录后复制

表示匀速），并无限循环下去。

为什么我的加载动画看起来不平滑或有锯齿感？

嗯，这确实是个常见的问题，尤其是在一些性能不那么充裕的设备上。我个人在开发中也遇到过，明明代码看起来没问题，但动画就是有些“卡顿”或“抖动”。这里面有几个可能的原因，或者说，我们可以尝试的优化点。

首先，也是最直接的，就是

animation-timing-function

登录后复制

。如果你没有明确设置它，或者设置成了

ease

登录后复制

、

ease-in-out

登录后复制

这类非线性的曲线，那么动画在开始和结束时会有加速或减速的效果，这对于一个需要持续匀速旋转的加载动画来说，会显得很不自然，甚至产生视觉上的停顿感。所以，务必使用

linear

登录后复制

，确保动画从头到尾都是匀速的。

.loader {
    /* ...其他样式 */
    animation: spin 1s linear infinite; /* 确保是 linear */
}

登录后复制

其次，这可能涉及到浏览器的渲染优化。有时候，浏览器会选择在CPU上进行动画计算，而不是利用更高效的GPU。为了强制浏览器使用GPU进行硬件加速，我们可以在动画元素上添加一些“魔法”属性。最常用的就是

transform: translateZ(0);

登录后复制

或者

will-change: transform;

登录后复制

。

.loader {
    /* ...其他样式 */
    transform: translateZ(0); /* 强制GPU加速 */
    /* 或者 */
    will-change: transform; /* 告诉浏览器这个属性会频繁变化，提前优化 */
}

登录后复制

transform: translateZ(0);

登录后复制

虽然看起来什么都没做（把元素在Z轴上移动了0个像素），但它能触发某些浏览器的层合成优化，将元素提升到独立的渲染层，从而利用GPU。

will-change

登录后复制

则更明确地告诉浏览器，某个属性即将发生变化，让浏览器可以提前进行优化准备。当然，

will-change

登录后复制

不要滥用，因为它也会消耗额外的内存。

最后，还有一些细节问题，比如元素的尺寸和边框宽度。虽然不常见，但在某些极端情况下，非整数的尺寸或边框宽度可能会导致像素渲染上的微小偏差，从而在高速旋转时产生视觉上的“抖动”。我一般会尽量使用偶数像素值，但这并非铁律，更多是经验之谈。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

如何自定义旋转加载动画的样式和速度？

自定义这些动画其实非常直观，就像我们调整一台机器的旋钮一样。核心在于对CSS属性值的把控。

调整速度： 最直接的就是改变

animation-duration

登录后复制

的值。这个值决定了动画完成一圈所需的时间。

想要快一点？把
```
1s
```
登录后复制
改成
```
0.5s
```
登录后复制
：
```
animation: spin 0.5s linear infinite;
```
登录后复制
想要慢一点？改成
```
2s
```
登录后复制
：
```
animation: spin 2s linear infinite;
```
登录后复制

调整颜色： 修改

border

登录后复制

和

border-top

登录后复制

的颜色值。

```
border: 4px solid #e0e0e0;
```
登录后复制
可以让背景边框变成更浅的灰色。
```
border-top: 4px solid #ff5722;
```
登录后复制
则可以让旋转的部分变成鲜艳的橙色。

调整尺寸和粗细：

```
width
```
登录后复制
和
```
height
```
登录后复制
决定了加载动画的整体大小。比如，改成
```
width: 80px; height: 80px;
```
登录后复制
就会得到一个更大的加载圈。
```
border-width
```
登录后复制
则控制了边框的粗细。把
```
4px
```
登录后复制
改成
```
8px
```
登录后复制
，你的加载圈就会显得更“粗壮”。

改变旋转方向： 如果你想让它逆时针旋转，只需要在

@keyframes

登录后复制

中调整

transform: rotate()

登录后复制

的值：

@keyframes spin-reverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); } /* 从0度到负360度 */
}

登录后复制

然后把动画名应用到元素上：

animation: spin-reverse 1s linear infinite;

登录后复制

更复杂的样式： 如果想实现更复杂的加载动画，比如多层旋转、不同颜色的分段，那可能就需要用到伪元素（

::before

登录后复制

和

::after

登录后复制

）或者嵌套多个

div

登录后复制

，每个

div

登录后复制

有自己的动画和样式。比如，你可以有一个外层大圈，里面套一个小圈，让它们以不同的速度或方向旋转，形成更丰富的视觉效果。但这会增加HTML结构和CSS的复杂性，需要根据具体需求权衡。

在实际项目中，如何更好地管理和复用这些CSS加载动画？

在真实的项目里，我们很少会为每个加载动画都手写一套独立的CSS。效率和可维护性是关键。我的经验是，可以从以下几个方面入手。

CSS变量（Custom Properties）： 这是现代CSS里非常强大的一个特性。你可以把加载动画的颜色、尺寸、速度等参数定义成CSS变量，这样在需要调整时，只需要修改变量的值，所有使用这些变量的加载动画都会同步更新。这比在多个地方修改硬编码的值要方便太多了。

:root {
    --loader-size: 50px;
    --loader-border-width: 4px;
    --loader-background-color: #f3f3f3;
    --loader-active-color: #3498db;
    --loader-speed: 1s;
}

.loader {
    width: var(--loader-size);
    height: var(--loader-size);
    border: var(--loader-border-width) solid var(--loader-background-color);
    border-top: var(--loader-border-width) solid var(--loader-active-color);
    border-radius: 50%;
    animation: spin var(--loader-speed) linear infinite;
}

登录后复制

然后，如果你想在某个地方使用一个不同颜色的加载器，可以直接在父元素或加载器自身上覆盖变量：

.loader--red {
    --loader-active-color: #e74c3c; /* 覆盖为红色 */
}

登录后复制

组件化思维和工具类： 在前端框架（如React、Vue、Angular）中，加载动画通常会被封装成一个独立的组件。这个组件内部包含HTML和CSS，对外暴露props（属性）来控制大小、颜色、速度等。这样，在任何需要加载动画的地方，直接引用这个组件即可。

即使不使用框架，也可以创建一系列CSS工具类：

```
.loader
```
登录后复制
：基础样式
```
.loader--large
```
登录后复制
：放大尺寸
```
.loader--small
```
登录后复制
：缩小尺寸
```
.loader--primary
```
登录后复制
：使用主色调
```
.loader--secondary
```
登录后复制
：使用次色调
```
.loader--fast
```
登录后复制
：加快速度

通过组合这些类，可以快速构建出不同风格的加载动画。

可访问性（Accessibility）： 这是一个经常被忽视但非常重要的点。屏幕阅读器用户可能无法“看到”加载动画。为了提供更好的用户体验，我们应该为加载动画添加可访问性属性。

```
role="status"
```
登录后复制
：表示这是一个状态信息，屏幕阅读器会知道这里有内容在更新。
```
aria-live="polite"
```
登录后复制
：告诉屏幕阅读器在内容更新时礼貌地通知用户，而不是打断他们。
隐藏的文本：为了更清晰地描述，可以添加一个视觉上隐藏但对屏幕阅读器可见的文本，比如“内容正在加载中…”

<div class="loader" role="status" aria-live="polite">
    <span class="sr-only">内容正在加载中...</span>
</div>

登录后复制

.sr-only

登录后复制

通常是一个CSS类，用于将元素在视觉上隐藏，但保留给屏幕阅读器：

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

登录后复制

通过这些方法，不仅能让你的CSS加载动画更易于开发和维护，也能让它们在各种场景下表现得更专业、更友好。

以上就是CSS如何制作旋转加载动画？@keyframes关键帧的详细内容，更多请关注php中文网其它相关文章！