製作僅CSS的裝載機是一個有意義的挑戰。令人著迷的無限動畫總是令人滿意的。 Codepen展示了各種各樣的技術，但是本文的重點是實現具有最小代碼的單元素加載程序。
我已經開發了超過500個單div加載器，這個四部分系列共享了所使用的技術。我們將探討眾多示例，展示微妙的調整如何產生不同的結果以及代碼的簡潔程度。
第一篇文章創建了一個常見的加載器模式：旋轉欄。
一種簡單的方法使用多個元素（在這種情況下為九個元素），每個元素在父母內代表一個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加載器技術。
以上是單元素加載器：旋轉器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
