css如何实现条纹加载效果

# CSS如何实现条纹加载效果

在网页设计中，加载动画不仅能缓解用户等待焦虑，还能提升交互体验。条纹加载效果因其动态视觉表现力被广泛应用。本文将介绍三种纯CSS实现条纹加载效果的方法。

## 一、线性渐变+动画实现基础条纹

通过`linear-gradient`创建条纹背景，再使用`animation`实现动态滚动：

```css
.stripe-loader {
  width: 200px;
  height: 20px;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #3498db 25%,
    #3498db 50%,
    #f0f0f0 50%,
    #f0f0f0 75%,
    #3498db 75%
  );
  background-size: 200% 100%;
  animation: stripeMove 1.5s linear infinite;
}

@keyframes stripeMove {
  0% { background-position: 200% 0; }
  100% { background-position: 0 0; }
}

原理说明： 1. 创建间隔重复的渐变条纹 2. 通过放大背景尺寸（200%）制造溢出效果 3. 动画改变背景位置实现滚动

二、伪元素+旋转实现斜向条纹

通过旋转伪元素创建45°斜条纹：

.diagonal-loader {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.diagonal-loader::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
    45deg,
    #2980b9,
    #2980b9 10px,
    #3498db 10px,
    #3498db 20px
  );
  animation: rotateStripes 2s linear infinite;
}

@keyframes rotateStripes {
  to { transform: rotate(360deg); }
}

特点： - 使用repeating-linear-gradient简化重复定义 - 通过旋转伪元素实现动态效果 - 外层容器需设置overflow: hidden

三、多背景层实现3D立体条纹

叠加多层背景创造立体感：

.3d-stripe-loader {
  width: 150px;
  height: 30px;
  background: 
    linear-gradient(90deg, rgba(0,0,0,0.1) 2px, transparent 2px) 0 0 / 10px 100%,
    linear-gradient(90deg, #16a085, #2ecc71);
  background-blend-mode: overlay;
  animation: progress 2s ease-in-out infinite;
}

@keyframes progress {
  0% { background-size: 10px 100%, 0% 100%; }
  100% { background-size: 10px 100%, 100% 100%; }
}

进阶技巧： 1. 使用多层背景叠加 2. 应用background-blend-mode混合模式 3. 分别控制不同层的动画效果

性能优化建议

1. 优先使用transform和opacity属性（触发GPU加速）
2. 避免频繁重排的属性（如width）
3. 使用will-change: transform提示浏览器优化
4. 简化渐变颜色节点数量

浏览器兼容方案

对于需要支持老旧浏览器的场景：

/* 添加-webkit前缀 */
@-webkit-keyframes stripeMove {
  0% { background-position: 200% 0; }
  100% { background-position: 0 0; }
}

/* 渐进增强方案 */
.loader {
  /* 基础样式 */
  background: #3498db;
}

@supports (background: linear-gradient(red, blue)) {
  .loader {
    /* 高级样式 */
    background: linear-gradient(...);
  }
}

通过组合这些技术，可以创建出各种富有创意的条纹加载效果，既能保持轻量级实现，又能达到专业级的视觉效果。 “`