掌握CSS动画需先理解@keyframes定义动画流程，再结合transform实现旋转、缩放等效果。1. 使用@keyframes设定0%到100%的样式变化，如旋转360度；2. 利用transform的rotate、scale、translate实现动态；3. 创建loader类通过border差异与旋转形成加载圈；4. 制作pulse呼吸效果，用scale在0.8到1.2间缩放。关键细节包括添加infinite使动画持续，选择linear或ease-in-out控制节奏，无需JavaScript即可实现流畅加载动画。
想让网页看起来更流畅，加载动画是个不错的选择。用CSS的 @keyframes 和 transform 能轻松做出简洁又好看的加载效果，不需要JavaScript也能实现。
1. 理解关键帧 @keyframes
@keyframes 是定义动画过程的核心规则。你可以指定某个时间段内元素的样式变化。
比如做一个旋转动画，可以这样写：
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
这段代码表示元素从0度转到360度，形成一圈完整的旋转。
2. 使用 transform 实现动态效果
transform 可以对元素进行旋转、缩放、平移等操作。结合 keyframes，能让动画更生动。
常见用法包括：- rotate()：让元素绕中心点旋转
- scale()：改变元素大小，适合做呼吸效果
- translate()：移动位置，可模拟跳动或滑入
3. 制作一个简单的旋转加载器
下面是一个实用例子：创建一个不断旋转的圆圈加载动画。
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
这个效果利用了边框颜色差异，只让顶部有颜色，配合旋转就形成了“进度条”式的加载动画。
4. 添加呼吸式缩放动画
如果你想做一个像心跳一样的加载提示，可以用 scale 配合 keyframes。
.pulse {
width: 20px;
height: 20px;
background: #e74c3c;
border-radius: 50%;
animation: breathe 1.5s ease-in-out infinite;
}
@keyframes breathe {
0%, 100% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
}
这个动画会让小圆点反复放大缩小，产生“呼吸”感，适合用于轻量级状态提示。
基本上就这些。只要掌握 @keyframes 定义动画流程，再用 transform 控制形变，就能做出各种简单又实用的加载效果。不复杂但容易忽略细节，比如记得加 infinite 让动画持续播放，还有选择合适的缓动函数（如 linear、ease-in-out）来控制节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
