答案是利用@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
不要滥用，因为它也会消耗额外的内存。
最后，还有一些细节问题，比如元素的尺寸和边框宽度。虽然不常见，但在某些极端情况下，非整数的尺寸或边框宽度可能会导致像素渲染上的微小偏差，从而在高速旋转时产生视觉上的“抖动”。我一般会尽量使用偶数像素值，但这并非铁律，更多是经验之谈。
Replit Ghostwrite
一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。
93 查看详情
如何自定义旋转加载动画的样式和速度？
自定义这些动画其实非常直观，就像我们调整一台机器的旋钮一样。核心在于对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加载动画更易于开发和维护，也能让它们在各种场景下表现得更专业、更友好。
以上就是CSS如何制作旋转加载动画？@keyframes关键帧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1086389.html
微信扫一扫 
支付宝扫一扫 
