css loading制作

CSS Loading 动画制作方法

通过CSS可以创建多种加载动画效果，以下是几种常见实现方式：

旋转动画 利用@keyframes和transform属性实现旋转效果：

.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 1s 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;
  height: 100%;
  width: 30%;
  background: #4285f4;
  animation: progress 2s linear infinite;
}
@keyframes progress {
  0% { left: -30%; }
  100% { left: 100%; }
}

骨架屏加载 内容加载前的占位效果：

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

实现技巧

性能优化 使用will-change属性提升动画性能：

.loader {
  will-change: transform;
}

响应式设计 通过vw/vh单位使加载动画适应不同屏幕：

.loader {
  width: 10vw;
  height: 10vw;
}

颜色变量 使用CSS变量方便主题切换：

:root {
  --loader-color: #3498db;
}
.loader {
  border-top-color: var(--loader-color);
}

进阶效果

3D旋转加载 添加透视效果实现三维旋转：

.cube-loader {
  width: 40px;
  height: 40px;
  transform-style: preserve-3d;
  animation: rotate3d 2s infinite ease;
}
@keyframes rotate3d {
  0% { transform: rotateX(0) rotateY(0); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

自定义动画曲线 使用cubic-bezier调整动画节奏：

.loader {
  animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}