答案：CSS加载动画通过@keyframes定义关键帧，结合transform、opacity等属性实现。1. 旋转圆圈利用border差异与rotate创建持续旋转效果；2. 脉冲波动画使用scale和opacity变化模拟扩散波纹；3. 多点跳动通过多个圆点设置不同animation-delay实现错落跳动；4. 自定义线条动画借助伪元素与translateX、scaleX制作进度条式动效。核心在于合理运用animation与可动画属性，追求简洁流畅的视觉体验。
在CSS中制作加载动画，主要是利用 @keyframes 定义动画关键帧，并结合 transform、opacity 等属性实现视觉动效。下面介绍几种常见且实用的加载动画实现方式。
1. 旋转圆圈加载动画
这是最常见的加载效果，使用一个圆形元素不断旋转。
对应的CSS：
.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); }
}
说明：通过改变 border-top 颜色制造视觉差，配合 rotate 实现持续旋转。
立即学习“前端免费学习笔记（深入）”；
2. 脉冲波（呼吸）动画
模拟心跳或扩散效果，常用于提示等待状态。
.loader {
width: 20px;
height: 20px;
background: #3498db;
border-radius: 50%;
opacity: 0.6;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0% {
transform: scale(0);
opacity: 0.6;
}
50% {
transform: scale(1.2);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0.6;
}
}
这个动画通过缩放和透明度变化，形成向外扩散的“波纹”感。
易优cms汽车车辆租赁源码1.7.2
下载
由于疫情等原因大家都开始习惯了通过互联网上租车服务的信息多方面，且获取方式简便，不管是婚庆用车、旅游租车、还是短租等租车业务。越来越多租车企业都开始主动把租车业务推向给潜在需求客户，所以如何设计一个租车网站，以便在同行中脱颖而出就重要了，易优cms针对租车行业市场需求、目标客户、盈利模式等，进行策划、设计、制作，建设一个符合用户与搜索引擎需求的租车网站源码。 网站首页
3. 多点跳动动画
三个小球依次上下跳动，常用于现代UI设计。
.loader {
display: flex;
gap: 6px;
}
.dot {
width: 8px;
height: 8px;
background: #3498db;
border-radius: 50%;
animation: bounce 1.4s ease-in-out infinite both;
}
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
0%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
}
HTML结构：
每个点设置不同延迟，形成错落有致的跳动节奏。
4. 自定义线条动画
使用伪元素创建动态线条加载效果。
.loader::before {
content: '';
display: block;
width: 50px;
height: 5px;
background: linear-gradient(90deg, #3498db, #e74c3c);
border-radius: 3px;
animation: slide 1.5s ease-in-out infinite;
}
@keyframes slide {
0% { transform: translateX(0) scaleX(1); }
50% { transform: translateX(100px) scaleX(0.2); }
100% { transform: translateX(0) scaleX(1); }
}
这种适合做进度条或内容加载指示器。
基本上就这些。核心是掌握 @keyframes 和 animation 属性的使用，再结合 transform、opacity 等可动画属性自由发挥。加载动画不需要复杂代码，简洁流畅更重要。
