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

制作css旋转加载动画的核心是使用@keyframes定义动画关键帧，并通过animation属性应用动画，结合transform: rotate()实现旋转效果；1. 首先创建一个圆形div元素，利用border属性制作圆环样式，通过border-top设置高亮色；2. 使用@keyframes定义从0deg到360deg的旋转动画；3. 将动画通过animation属性绑定到元素，设置1s时长、linear速度曲线和infinite无限循环；4. 若动画卡顿，应优先使用transform触发gpu硬件加速，避免使用left/top等引发重排的属性；5. 可通过animation-timing-function使用ease-in-out或cubic-bezier优化视觉流畅感；6. 在关键动画元素上合理使用will-change: transform提示浏览器提前优化，但避免滥用；7. 检查并减少页面中其他复杂样式或javascript对渲染性能的影响；8. 实现多层动画可通过嵌套元素或伪元素::before/::after，为不同层级设置不同旋转速度、方向或延迟；9. 复杂形状可结合border技巧、clip-path裁剪或transform-origin调整旋转中心；10. 为增强动画生动性，可结合transform的scale()实现脉冲效果、translate()添加位移、opacity实现透明度变化、border-color或background-color实现颜色过渡；11. 使用filter属性添加drop-shadow或blur等视觉效果提升层次感；12. 所有效果应协调统一，避免过度堆砌，确保动画自然流畅且性能良好，最终实现一个视觉吸引且高效运行的加载动画。

CSS怎样制作旋转加载动画？@keyframes关键帧

CSS制作旋转加载动画，核心确实在于

@keyframes

登录后复制

规则，它允许我们定义动画的关键帧样式，然后通过

animation

登录后复制

属性将这些动画应用到元素上，最常见的旋转就是利用

transform: rotate()

登录后复制

。

要制作一个基本的旋转加载动画，我们可以先准备一个简单的HTML元素，比如一个

div

登录后复制

，然后给它一些基础样式，让它看起来像一个圆环。接着，关键在于定义一个

@keyframes

登录后复制

动画，让这个圆环从0度旋转到360度。最后，将这个动画应用到

div

登录后复制

上，设置好动画时长、循环次数（通常是无限循环）和动画速度曲线。

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

登录后复制

.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* 浅灰色背景 */
    border-top: 5px solid #3498db; /* 蓝色旋转部分 */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* 应用动画 */
}

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

登录后复制

动画效果不流畅或卡顿怎么办？

遇到动画卡顿，这真的挺让人头疼的，尤其是在一些性能要求比较高的场景或者老旧设备上。通常，这不单单是代码写得对不对的问题，更多是浏览器渲染机制和性能优化的考量。

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

首先，最直接的优化点是利用CSS的硬件加速。浏览器在处理

transform

登录后复制

、

opacity

登录后复制

、

filter

登录后复制

这些属性时，通常会把它们放到GPU上进行渲染，而不是CPU。所以，尽量使用

transform: rotate()

登录后复制

而不是修改

left

登录后复制

、

top

登录后复制

这样的属性来模拟旋转，后者会触发更多的回流和重绘，性能损耗大得多。

其次，

animation-timing-function

登录后复制

的选择也很重要。

linear

登录后复制

是最简单的匀速动画，但有时候，过于匀速反而显得生硬。

ease-in-out

登录后复制

或者自定义的

cubic-bezier

登录后复制

曲线可以模拟出更自然的加速和减速效果，虽然这不直接解决卡顿，但能让动画看起来更“舒服”，主观上感觉更流畅。

再来，可以考虑使用

will-change

登录后复制

属性。这个属性可以提前告诉浏览器，某个元素将要发生变化，让浏览器提前进行优化。比如，对于旋转的加载动画，可以在

.loader

登录后复制

上加上

will-change: transform;

登录后复制

。但要注意，

will-change

登录后复制

不是万能药，过度使用反而可能导致性能下降，因为它会消耗更多的内存。只在确实需要优化的关键动画元素上使用它。

最后，检查一下是不是有其他复杂的CSS样式或者JavaScript操作在同时运行，它们可能会抢占渲染资源，导致动画卡顿。有时候，一个看似简单的动画，背后可能牵扯到整个页面的性能瓶颈。

如何实现多层或复杂形状的旋转动画？

单一的圆环旋转固然经典，但如果想做出更酷炫、更有识别度的加载效果，多层或者复杂形状的旋转是必经之路。

千面视频动捕

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

查看详情

一种常见的做法是利用嵌套元素。比如，你可以有一个外层

div

登录后复制

，里面再放一个或多个

div

登录后复制

。每个

div

登录后复制

可以有自己的样式和独立的

animation

登录后复制

，设置不同的旋转速度、方向或者延迟，就能创造出非常丰富的层次感。比如，外层慢速顺时针，内层快速逆时针，视觉上会非常有趣。

<div class="outer-loader">
    <div class="inner-loader"></div>
</div>

登录后复制

.outer-loader {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #e74c3c; /* 红色 */
    border-radius: 50%;
    animation: spin-outer 1.5s linear infinite;
    display: flex; /* 方便内部元素居中 */
    justify-content: center;
    align-items: center;
}

.inner-loader {
    width: 30px;
    height: 30px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #f1c40f; /* 黄色 */
    border-radius: 50%;
    animation: spin-inner 0.8s linear infinite reverse; /* 反向旋转 */
}

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

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

登录后复制

除了嵌套，伪元素

::before

登录后复制

和

::after

登录后复制

也是实现多层效果的利器。它们不需要额外的HTML结构，直接依附在父元素上，可以拥有独立的样式和动画。这对于制作一些比如中心点不变，但周围有多个小点旋转的动画非常方便。你可以给主元素一个旋转动画，然后给它的伪元素另一个不同的旋转动画，甚至配合

transform-origin

登录后复制

来改变旋转中心。

对于更复杂的形状，比如不是简单的圆环，而是更具设计感的几何图形，可以考虑使用

border

登录后复制

的各种巧妙组合，或者利用

clip-path

登录后复制

来裁剪出不规则形状。当然，如果形状真的非常复杂，或者需要路径动画，那可能就需要引入SVG了，SVG在路径动画和图形控制上有着CSS难以比拟的优势，但那就超出纯CSS的范畴了。不过，仅仅是多边形或者弧线，CSS结合

border

登录后复制

和

transform

登录后复制

还是能玩出很多花样的。

除了旋转，还能结合哪些CSS属性让加载动画更生动？

只靠旋转，动画可能会显得有点单调。要想让加载动画看起来更富有生命力，我们可以将旋转与其他CSS属性巧妙地结合起来。这就像给动画加了点“调料”，让它更有味道。

transform

登录后复制

属性本身就有很多宝藏。除了

rotate()

登录后复制

，我们还可以尝试

scale()

登录后复制

（缩放）和

translate()

登录后复制

（位移）。比如，一个加载点在旋转的同时，周期性地放大缩小，或者在某个轴向上轻微地来回移动，都能增加视觉上的趣味性。一个经典的例子就是脉冲效果：旋转的圆环在特定时刻稍微放大一点，然后恢复，这种“呼吸感”会让动画显得不那么机械。

改变

opacity

登录后复制

（透明度）也是一个非常实用的技巧。让旋转的元素在某个关键帧变得半透明，或者在动画开始和结束时有一个渐入渐出的效果，可以增加动画的柔和度或者强调某个瞬间。例如，一个点在旋转到某个位置时，突然闪烁一下（透明度瞬间变化），再恢复。

颜色变化也是一个非常直观且有效的增强手段。通过

@keyframes

登录后复制

改变

border-color

登录后复制

或者

background-color

登录后复制

，让加载动画在旋转的同时，颜色也在不断变幻。这可以根据你的品牌色或者设计主题来定制，比如从一种颜色渐变到另一种，或者在特定时刻高亮显示。

/* 结合了旋转、缩放和颜色变化的加载动画 */
.fancy-loader {
    width: 60px;
    height: 60px;
    border: 6px solid;
    border-radius: 50%;
    animation: fancy-spin 2s ease-in-out infinite;
}

@keyframes fancy-spin {
    0% {
        transform: rotate(0deg) scale(1);
        border-color: #3498db #f3f3f3 #f3f3f3 #f3f3f3;
    }
    25% {
        transform: rotate(90deg) scale(1.1);
        border-color: #2ecc71 #f3f3f3 #f3f3f3 #f3f3f3;
    }
    50% {
        transform: rotate(180deg) scale(1);
        border-color: #e74c3c #f3f3f3 #f3f3f3 #f3f3f3;
    }
    75% {
        transform: rotate(270deg) scale(1.1);
        border-color: #f1c40f #f3f3f3 #f3f3f3 #f3f3f3;
    }
    100% {
        transform: rotate(360deg) scale(1);
        border-color: #3498db #f3f3f3 #f3f3f3 #f3f3f3;
    }
}

登录后复制

此外，