css如何實現內嵌加載效果

# CSS如何實現內嵌加載效果

在現代網頁設計中，加載效果是提升用戶體驗的重要元素。通過純CSS實現內嵌加載動畫，既能減少HTTP請求，又能保持頁面輕量化。以下是幾種常見的實現方案：

---

## 1. 旋轉加載動畫（Spinner）

```css
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #09f;
  animation: spin 1s linear infinite;
}

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

實現原理：
通過border屬性創建圓形邊框，利用border-top-color突出頂部顏色，配合rotate旋轉動畫實現經典加載效果。

2. 進度條加載（Progress Bar）

.progress-bar {
  height: 4px;
  width: 100%;
  background: linear-gradient(to right, #09f 0%, #09f 50%, transparent 50%);
  background-size: 200% 100%;
  animation: progress 2s linear infinite;
}

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

特點：
使用漸變背景配合位移動畫，模擬進度條填充效果，適合頂部加載提示。

3. 骨架屏（Skeleton Screen）

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

@keyframes shimmer {
  to { background-position: -200% 0; }
}

應用場景：
在內容加載前顯示灰色占位區塊，通過光暈動畫營造”即將加載完成”的視覺暗示。

4. 點陣加載動畫（Dot Pulse）

.dot-pulse {
  display: flex;
  gap: 8px;
}
.dot-pulse div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #09f;
  animation: pulse 1.4s infinite ease-in-out;
}
.dot-pulse div:nth-child(2) {
  animation-delay: 0.2s;
}
.dot-pulse div:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

優勢：
通過錯開動畫時間實現波浪式效果，比單一元素動畫更具活力。

性能優化建議

1. 優先使用transform和opacity屬性（觸發GPU加速）
2. 避免過多同時運行的動畫（限制在3-5個以內）
3. 使用prefers-reduced-motion媒體查詢為運動敏感用戶提供替代方案：

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

通過合理運用這些CSS技術，無需JavaScript即可創建流暢的加載體驗，顯著提升用戶等待時的感知質量。 “`

（全文約650字）