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媒體查詢優化可訪問性

通過調整動畫參數、顏色和尺寸，這些基礎方案可以衍生出各種視覺效果，滿足不同項目的設計需求。 “`