css loading制作
CSS Loading动画制作方法
使用纯CSS可以创建多种加载动画效果，以下是几种常见的实现方式：
旋转圆圈动画 通过border属性和关键帧动画实现经典旋转效果：
.loader {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px 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: #333;
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%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}进度条加载动画 创建水平移动的进度条效果：
.progress-loader {
width: 100%;
height: 4px;
background: #e0e0e0;
position: relative;
overflow: hidden;
}
.progress-loader::before {
content: '';
position: absolute;
left: -50%;
width: 50%;
height: 100%;
background: #4285f4;
animation: progress 2s linear infinite;
}
@keyframes progress {
to {
left: 100%;
}
}自定义SVG加载动画 结合SVG和CSS动画：
.svg-loader {
width: 60px;
height: 60px;
animation: rotate 2s linear infinite;
}
.svg-loader circle {
stroke: #ccc;
stroke-width: 4;
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
100% { transform: rotate(360deg); }
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124;
}
}性能优化建议
- 使用transform和opacity属性触发GPU加速
- 限制动画复杂度，避免过多DOM元素参与动画
- 使用will-change属性预提示浏览器
- 对移动设备考虑减少动画持续时间
响应式处理技巧
通过媒体查询调整加载动画尺寸：
@media (max-width: 600px) {
.loader {
width: 30px;
height: 30px;
border-width: 3px;
}
}这些方法可以根据实际需求组合使用或修改参数，CSS加载动画的优势在于轻量级、无依赖性和高性能表现。
