CSS 載入動畫產生器

從多種 CSS 載入動畫中選擇並取得代碼。自訂旋轉器、圓點、進度條等的顏色、大小和速度。

載入器類型

顏色

大小: 40px

20px80px

速度: 1.0s

0.5s3.0s

預覽

HTML

<div class="loader-spinner"></div>

CSS

.loader-spinner {
  width: 40px;
  height: 40px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3B82F6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

分享此工具

📖

使用方法

Step 1

選擇載入器

選擇載入器

選擇您喜歡的載入器設計

→

Step 2

自訂

調整顏色和大小

→

Step 3

複製

複製 HTML/CSS 代碼

✨

功能特色

豐富設計

旋轉器、圓點、進度條等多種樣式

可自訂

調整顏色、大小和速度

複製即用

直接複製 HTML+CSS 使用

❓

FAQ

旋轉器、圓點、進度條、圓環、脈衝等多種。

🔗相關工具

色碼換算工具

在 HEX、RGB 和 HSL 色碼之間互換。使用顏色選擇器和即時預覽直觀選色。

色彩選擇器

使用色輪和滑桿直覺地選取顏色。取得並複製 HEX、RGB 和 HSL 格式的色彩代碼。

圖片色彩擷取器

自動偵測圖片中的主要色彩並生成色彩調色盤。也可以點擊圖片上的任意位置來取得個別色彩。

圖片平均色彩擷取器

計算整張圖片或選定區域的平均色彩。適合用於選擇配色方案或縮圖背景顏色。

CSS 漸層產生器

使用拖動控制視覺化建立 CSS 漸層。支援線性、放射狀和圓錐漸層類型及預設。

CSS 陰影產生器

使用滑桿視覺化建立 CSS box-shadow。支援多重陰影和內陰影。