答案：CSS加载动画通过@keyframes定义关键帧，结合transform、opacity等属性实现。1. 旋转圆圈利用border差异与rotate创建持续旋转效果；2. 脉冲波动画使用scale和opacity变化模拟扩散波纹；3. 多点跳动通过多个圆点设置不同animation-delay实现错落跳动；4. 自定义线条动画借助伪元素与translateX、scaleX制作进度条式动效。核心在于合理运用animation与可动画属性，追求简洁流畅的视觉体验。
在CSS中制作加载动画，主要是利用 @keyframes 定义动画关键帧，并结合 transform、opacity 等属性实现视觉动效。下面介绍几种常见且实用的加载动画实现方式。
1. 旋转圆圈加载动画
这是最常见的加载效果，使用一个圆形元素不断旋转。
<div class="loader"></div>
对应的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;
}
}
这个动画通过缩放和透明度变化，形成向外扩散的“波纹”感。
3. 多点跳动动画
三个小球依次上下跳动，常用于现代UI设计。
度加剪辑
63
度加剪辑（原度咔剪辑），百度旗下AI创作工具
63
查看详情
.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结构：
<div class="loader"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>
每个点设置不同延迟，形成错落有致的跳动节奏。
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 等可动画属性自由发挥。加载动画不需要复杂代码，简洁流畅更重要。
相关标签：
css html 伪元素 css html border 伪元素 transform animation ui
大家都在看：
在css引入中media属性如何使用
如何通过html base标签影响css路径解析
在css中如何用PostCSS实现变量与混入
css animation在侧边栏展开收起中的应用
在html中引入css外部文件会有什么影响
如何通过html base标签影响css路径解析
在css中如何用PostCSS实现变量与混入
css animation在侧边栏展开收起中的应用
在html中引入css外部文件会有什么影响
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容