本文目錄導讀：

1. 使用CSS動畫
2. 使用SVG圖像

CSS繪制加載動圖

在網(wǎng)頁開發(fā)中，加載動圖是一個常見的元素，用于在內(nèi)容加載時吸引用戶的注意力，使用CSS來繪制加載動圖，不僅可以提高頁面的交互性，還能增加用戶體驗。

使用CSS動畫

CSS動畫是繪制加載動圖的一種常用方法，通過定義關鍵幀動畫，我們可以創(chuàng)建出各種復雜的動畫效果，以下是一個簡單的示例，展示如何使用CSS動畫來繪制一個旋轉(zhuǎn)的加載動圖：

@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-container {
  position: relative;
  width: 50px;
  height: 50px;
}
.loading-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  animation: loading 2s linear infinite;
}

在這個示例中，我們定義了一個名為loading的CSS動畫，用于繪制一個旋轉(zhuǎn)的加載動圖，我們創(chuàng)建了一個名為.loading-container的類，用于包含加載動圖，我們使用::before偽元素來繪制加載動圖的背景。

使用SVG圖像

除了使用CSS動畫外，我們還可以使用SVG圖像來繪制加載動圖，SVG是一種基于XML的矢量圖形格式，支持復雜的圖形和動畫效果，以下是一個使用SVG圖像來繪制加載動圖的示例：

<div class="loading-container">
  <svg viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20" stroke="#f3f3f3" stroke-width="2" fill="transparent"></circle>
    <path d="M 25,25 L 25,45 A 20,20 0 0,1 25,5 L 45,5 A 20,20 0 0,1 45,45 L 5,45 A 20,20 0 0,1 5,25 Z" stroke="#f3f3f3" stroke-width="2" fill="transparent"></path>
  </svg>
</div>

在這個示例中，我們創(chuàng)建了一個名為.loading-container的類，用于包含加載動圖，我們使用SVG元素來繪制加載動圖的背景。circle元素用于繪制一個圓形，path元素用于繪制一個路徑，通過調(diào)整這些元素的樣式和位置，我們可以創(chuàng)建出各種復雜的加載動圖效果。

使用CSS和SVG圖像來繪制加載動圖是一種非常實用的技術，通過掌握這些方法，我們可以輕松地創(chuàng)建出各種吸引人的加載動圖效果，提高頁面的交互性和用戶體驗。