答案：通过@keyframes定义旋转动画并结合transform属性，可创建流畅的CSS圆形加载动画。首先构建一个div元素作为spinner，利用@keyframes设置0%到100%的rotate变化实现360度旋转；接着将动画绑定至.spinner类，设定1秒线性无限循环，配合border差异色形成视觉焦点，border-radius确保为正圆；使用transform而非传统属性提升性能，因支持硬件加速；还可扩展pulse-spin动画加入scale变化实现缩放旋转效果。关键在于合理配置动画帧与合成属性以保证流畅性与兼容性。
实现一个流畅的加载动画（spinner）并不复杂，关键在于合理使用 @keyframes 定义动画帧，并结合 transform 属性实现平滑旋转或缩放效果。下面一步步教你如何用纯CSS创建常见的圆形旋转加载动画。
1. 创建基本HTML结构
一个简单的div元素即可作为加载指示器：
<div class="spinner"></div>2. 使用@keyframes定义旋转动画
通过 @keyframes 设置从0%到100%的旋转变化。这里使用 transform: rotate() 实现持续转动。
示例代码：
立即学习“前端免费学习笔记（深入）”；
@keyframes spin {0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
这个动画会让元素顺时针完整旋转一圈。
3. 应用动画到spinner元素
将上面定义的动画绑定到spinner类，并设置动画时长、线性过渡和无限循环。
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
说明：
- border 创建环形轮廓
- border-top 设为不同颜色，形成视觉焦点
- border-radius: 50% 确保是正圆
- animation 参数：动画名、时长、速度曲线、重复次数
4. transform技巧提升性能
使用 transform 而非 left/top 或 width/height 动画，因为 transform 属于合成属性，浏览器会启用硬件加速，动画更流畅。
你也可以扩展动画类型，比如加入缩放脉冲效果：
@keyframes pulse-spin {0% {
transform: rotate(0deg) scale(0.8);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(0.8);
}
}
这样在旋转的同时加入大小变化，适合某些动态风格的设计。
基本上就这些。一个高效、兼容性好的CSS加载动画，核心就是 @keyframes 控制帧动画，搭配 transform 实现高性能视觉变换。不复杂但容易忽略细节，比如border的分布或动画timing-function的选择。
