css如何實現斑馬線加載效果

# CSS如何實現斑馬線加載效果

## 引言

在網頁設計中，加載動畫是提升用戶體驗的重要元素。斑馬線加載效果（Zebra Loading）因其視覺辨識度高且實現簡單，被廣泛應用于數據表格、進度條等場景。本文將介紹如何使用純CSS實現這種動態條紋效果。

## 核心實現原理

斑馬線效果的本質是通過**線性漸變背景**配合**動畫位移**實現。主要依賴以下CSS特性：

1. `repeating-linear-gradient` 創建重復條紋
2. `background-size` 控制條紋密度
3. `animation` 實現動態滾動效果

## 基礎實現代碼

```html
<div class="zebra-loader"></div>

.zebra-loader {
  width: 100%;
  height: 8px;
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0 0px,
    #f0f0f0 20px,
    #3498db 20px,
    #3498db 40px
  );
  background-size: 200% 100%;
  animation: zebraMove 1.5s linear infinite;
}

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

代碼解析

1. 漸變創建：

   • 使用45度角斜向漸變
   • 每40px為一個循環單元（20px灰色+20px藍色）

2. 背景尺寸：

   • background-size: 200% 100% 使背景寬度是容器的2倍
   • 確保動畫過程中始終有完整的條紋顯示

3. 動畫控制：

   • 通過改變background-position的X坐標實現滾動
   • 從100%到0%的位移形成無縫循環

進階優化方案

1. 平滑過渡版本

background: repeating-linear-gradient(
  45deg,
  #f0f0f0 0px,
  #f0f0f0 10px,
  #3498db 10px,
  #3498db 20px
);

2. 垂直條紋版本

background: repeating-linear-gradient(
  90deg,
  transparent 0px,
  transparent 10px,
  #3498db 10px,
  #3498db 20px
);

3. 彩色動畫版本

animation: zebraMove 0.8s linear infinite, colorChange 3s alternate infinite;

@keyframes colorChange {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

瀏覽器兼容性

• 現代瀏覽器均完美支持
• IE10+需要添加-ms-前綴
• 移動端表現良好

結語

通過CSS漸變與動畫的結合，我們可以用極少的代碼實現專業級的加載效果。這種技術還可擴展應用于進度條、邊框動畫等多種場景，開發者可根據實際需求調整角度、顏色和動畫參數來創造個性化效果。 “`

（全文約560字）