答案是利用@keyframes和transform: rotate()创建旋转动画，通过border差异形成动态缺口，配合animation实现持续旋转；优化可采用linear时间函数、GPU加速（如translateZ或will-change）以提升流畅度；自定义可通过调整animation-duration、颜色、尺寸等属性实现；项目中推荐使用CSS变量、组件化封装和工具类提高复用性，并添加role="status"、aria-live="polite"及sr-only文本增强可访问性。
在CSS里制作旋转加载动画，最核心的思路就是利用
@keyframes规则配合
transform: rotate()属性，让一个带有部分边框的圆形元素持续旋转起来。这就像我们小时候玩陀螺，给它一个初始的力，它就能自顾自地转起来，直到力尽为止。而CSS动画，就是我们给这个陀螺注入的“永恒的力”。
解决方案
要实现一个经典的旋转加载动画，我们通常会创建一个简单的HTML元素，比如一个
div，然后用CSS赋予它圆形的外观和旋转的生命。
首先，HTML部分可以非常简洁：
接着是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不要滥用，因为它也会消耗额外的内存。
最后，还有一些细节问题，比如元素的尺寸和边框宽度。虽然不常见，但在某些极端情况下，非整数的尺寸或边框宽度可能会导致像素渲染上的微小偏差，从而在高速旋转时产生视觉上的“抖动”。我一般会尽量使用偶数像素值，但这并非铁律，更多是经验之谈。
如何自定义旋转加载动画的样式和速度？
自定义这些动画其实非常直观，就像我们调整一台机器的旋钮一样。核心在于对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"
：告诉屏幕阅读器在内容更新时礼貌地通知用户，而不是打断他们。- 隐藏的文本：为了更清晰地描述，可以添加一个视觉上隐藏但对屏幕阅读器可见的文本，比如“内容正在加载中…”
内容正在加载中...
.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加载动画更易于开发和维护，也能让它们在各种场景下表现得更专业、更友好。
