css如何实现虚线加载效果

# CSS如何实现虚线加载效果

虚线加载效果是一种常见的UI设计元素，常用于数据加载、进度指示等场景。通过纯CSS可以实现多种虚线动画效果，下面介绍3种典型实现方案。

## 方法一：border+animation实现

```css
.dashed-loader {
  width: 100px;
  height: 100px;
  border: 5px dashed #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

原理分析： 1. 创建圆形元素并设置虚线边框 2. 通过旋转动画实现加载效果 3. 调整animation-duration可控制旋转速度

方法二：linear-gradient实现动态虚线

.gradient-loader {
  width: 200px;
  height: 10px;
  background: 
    repeating-linear-gradient(
      to right,
      #3498db 0%,
      #3498db 10%,
      transparent 10%,
      transparent 20%
    );
  background-size: 200% 100%;
  animation: move 1.5s linear infinite;
}

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

特点： - 通过渐变色创建虚线图案 - 背景位置动画产生运动效果 - 可轻松调整虚线的间隔比例

方法三：SVG+CSS实现高级效果

<svg class="svg-loader" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="45" />
</svg>

.svg-loader {
  width: 100px;
  height: 100px;
}

.svg-loader circle {
  fill: none;
  stroke: #3498db;
  stroke-width: 5;
  stroke-dasharray: 10, 5;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes dash {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 100; }
}

优势： - 使用SVG的stroke-dasharray精确控制虚线样式 - stroke-dashoffset实现路径绘制动画 - 适合需要精确控制路径的场景

实际应用建议

1. 简单场景推荐方法一，兼容性最好
2. 需要自定义虚线样式时使用方法二
3. 复杂路径动画优先考虑SVG方案
4. 可配合prefers-reduced-motion媒体查询优化可访问性

通过调整动画参数、颜色和尺寸，这些基础方案可以衍生出各种视觉效果，满足不同项目的设计需求。 “`