css制作加载动画
使用纯CSS制作加载动画
通过CSS的@keyframes和animation属性可以创建多种加载动画效果，以下列举几种常见实现方式：
旋转动画（适合图标加载）
.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); }
}点状加载动画
.dot-loader {
display: flex;
justify-content: center;
gap: 8px;
}
.dot-loader div {
width: 12px;
height: 12px;
background-color: #3498db;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out;
}
.dot-loader div:nth-child(2) {
animation-delay: 0.2s;
}
.dot-loader div:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}进度条加载动画
.progress-loader {
width: 100%;
height: 4px;
background-color: #e0e0e0;
overflow: hidden;
}
.progress-loader::after {
content: '';
display: block;
width: 20%;
height: 100%;
background-color: #4285f4;
animation: progress 2s linear infinite;
}
@keyframes progress {
0% { transform: translateX(-100%); }
100% { transform: translateX(500%); }
}高级技巧：使用CSS变量控制动画
通过CSS变量可以动态调整动画参数：
:root {
--loader-color: #3498db;
--loader-size: 40px;
--loader-speed: 1s;
}
.custom-loader {
width: var(--loader-size);
height: var(--loader-size);
border: 4px solid rgba(0,0,0,0.1);
border-left-color: var(--loader-color);
border-radius: 50%;
animation: rotate var(--loader-speed) linear infinite;
}响应式加载动画设计
结合媒体查询适配不同设备：
@media (max-width: 600px) {
.loader {
width: 30px;
height: 30px;
border-width: 3px;
}
.dot-loader div {
width: 10px;
height: 10px;
}
}性能优化建议
- 优先使用
transform和opacity属性触发硬件加速 - 避免过多使用
box-shadow等耗性能的属性 - 对重复使用的动画考虑使用
will-change: transform; - 简化关键帧数量，通常3-5个关键帧足够表现流畅动画
这些方法均无需JavaScript即可实现，通过调整颜色、尺寸和动画时长等参数可快速定制不同风格的加载效果。
