單元素加載器：旋轉器

製作僅CSS的裝載機是一個有意義的挑戰。令人著迷的無限動畫總是令人滿意的。 Codepen展示了各種各樣的技術，但是本文的重點是實現具有最小代碼的單元素加載程序。

我已經開發了超過500個單div加載器，這個四部分系列共享了所使用的技術。我們將探討眾多示例，展示微妙的調整如何產生不同的結果以及代碼的簡潔程度。

單元素裝載機系列：

1. 單元素加載器：旋轉器 -您在這裡
2. 單元素加載程序：點
3. 單元素加載程序：條
4. 單元素加載程序：前進3D

第一篇文章創建了一個常見的加載器模式：旋轉欄。

方法

一種簡單的方法使用多個元素（在這種情況下為九個元素），每個元素在父母內代表一個bar。不透明度和轉換創造出旋轉效果。

但是，我的方法僅使用一個元素：

<div></div>

...和10個CSS聲明：

 .loader {
  寬度：150px; / *控制大小 */
  方面比例：1;
  顯示：網格；
  面具：錐形學位（來自22DEG，＃0003，＃000）;
  動畫：加載1S步驟（8）無限；
}
.loader，
.loader：{
  -_ g：線性級別（＃17177C 0 0）50％; / *在這裡更新顏色 */
  背景： 
    var（ -  _ g）/34％8％空間無重複，
    var（-_ g）/8％34％無重複空間；
}
.loader：{
  內容： ””;
  變換：旋轉（45維格）;
}
@keyframes load {
  to {變換：旋轉（1Turn）; }
}

代碼分解

最初，該代碼似乎很不尋常，但是比看起來要簡單。首先，我們定義元素的尺寸 - 150px正方形。無論調整大小如何， aspect-ratio可以確保它保持正方形。

 .loader {
  寬度：150px; / *控制大小 */
  方面比例：1; / *保持正方形 */
}

對於CSS加載器，單個尺寸控制值是理想的。這是寬度；所有計算都是相對於它的。這可以輕鬆調整尺寸。

漸變創建條。這是最複雜的部分。一個梯度生成兩個條：

背景：線性級別（＃17177C 0 0）50％/34％8％空間無重複；

該梯度使用一種顏色和兩種顏色止損，從而產生純色。尺寸寬34％，高8％（50％）。 space關鍵字重複了梯度，創建了兩個條。

從規範中：

將圖像按照在背景定位區域內的頻率進行重複，而不會被剪切，然後將圖像間隔填充以填充該區域。第一個也是最後一個圖像觸及該區域的邊緣。

34％的寬度只能允許兩個條（3 34％> 100％），留下差距（100％-2 34％= 32％）。 space將這些縫隙集中在集中。 33％至50％之間的寬度可確保至少兩個帶間距的條。

我們使用第二個梯度創建了另外兩個條，導致：

背景： 
 線性梯度（＃17177C 0 0）50％/34％8％空間無重複，
 線性級別（＃17177C 0 0）50％/8％34％無重複空間；

A CSS變量優化了這一點：

 -_ g：線性級別（＃17177C 0 0）50％; / *在這裡更新顏色 */
背景： 
 var（ -  _ g）/34％8％空間無重複，
 var（-_ g）/8％34％無重複空間；

這產生了四個條。 CSS變量簡化了顏色更新。

.loader元素及其::before創建了四個條，總計八個。

 .loader {
  寬度：150px; / *控制大小 */
  方面比例：1;
  顯示：網格；
}
.loader，
.loader :: {
  -_ g：線性級別（＃17177C 0 0）50％; / *在這裡更新顏色 */
  背景： 
    var（ -  _ g）/34％8％空間無重複，
    var（-_ g）/8％34％無重複空間；
}
.loader :: {
  內容： ””;
  變換：旋轉（45維格）;
}

display: grid確保偽元素覆蓋父母的區域，從而消除了對明確維度的需求。

將偽元素旋轉為45度元素，將其餘的棒旋轉。

不透明度控制

使用帶有conic-gradient的CSS mask實現了單桿離開褪色小徑的效果：

面具：錐形學位（來自22DEG，＃0003，＃000）;

該梯度逐漸提高透明度。應用於裝載機，會產生褪色的棒幻覺。每個欄似乎由於掩蓋而逐漸消失，從而產生了不同不透明度的印象。

旋轉動畫

使用steps(8) （其中8是條的數量）的階梯動畫創建旋轉：

 .loader {
  動畫：加載3S步驟（8）無限；
}

@keyframes load {
  到{變換：旋轉（1Turn）}
}

這完成了單元素，最小CSS加載器。尺寸和顏色很容易控制。添加A ::after可以擴展到十二個條，並進行較小的代碼調整。使用不同的梯度和不透明度技術，也可以實現替代實現。

替代形狀：點

使用徑向梯度代替線性梯度，創建基於DOT的加載器是相似的。掩蓋不透明度的核心概念保持不變，但形狀是圓圈。 Safari兼容性可能需要調整梯度。

進一步的例子

使用各種技術（梯度，面具，偽元素）顯示了其他幾個旋轉器加載器。這些是理解不同方法的練習。

結論

使用一個div ，梯度，偽元素和變量，可以創建各種旋轉裝載機。這些示例在根本上是相似的，並且進行了較小的修改。這僅僅是開始。該系列將探索更高級的CSS加載器技術。

單元素裝載機系列：

1. 單元素加載器：旋轉器 -您在這裡
2. 單元素加載程序：點
3. 單元素加載程序：條
4. 單元素加載程序：前進3D

以上是單元素加載器：旋轉器的詳細內容。更多資訊請關注PHP中文網其他相關文章！