單元素加載程序：條

本文探討了使用條形圖和以前針對旋轉器和點的文章中使用的靈活CSS技術來創建加載動畫。我們將通過最小的代碼更改產生許多變體，從而利用CSS的功率。

系列概述

• 單元素加載器：旋轉器
• 單元素加載程序：點
• 單元素加載器：條形 -當前文章
• 單元素加載程序：前進3D

讓我們研究20個酒吧裝載機示例。儘管這似乎令人生畏，但所有示例都共享相同的代碼結構，並通過簡單的價值調整實現了變化。重點不是創建一個特定的加載程序，而是在掌握技術上以產生單個基本代碼的無數變化。

建造條形

我們首先使用使用width （或height ）和aspect-ratio來定義維度以保持比例：

 .bars {
  寬度：45px;
  方面比例：1;
}

我們使用線性梯度背景模擬三個條 - 第2部分中類似於點加載器的方法。

 .bars {
  寬度：45px;
  方面比例：1;
  -C：無重複線性級別（＃000 0 0）; / *定義顏色 */
  背景： 
    var（-c）0％50％，
    var（-c）50％50％，
    var（-c）100％50％；
  背景大小：20％100％； / * 20％ *（3個bars 2個空格）= 100％ */
}

這創建了三桿結構。本文大量利用了背景操作，因此參考以前的文章或鏈接的堆棧溢出答案將在需要時提供更詳細的解釋。

動畫酒吧

動畫是通過更改元素的大小或位置來實現的。讓我們使用密鑰幀對大小進行動畫：

 @keyframes load {
  0％{背景大小：20％100％，20％100％，20％100％； }
  33％{背景大小：20％10％，20％100％，20％100％； }
  50％{背景大小：20％100％，20％10％，20％100％； }
  66％{背景大小：20％100％，20％100％，20％10％； }
  100％{背景大小：20％100％，20％100％，20％100％； }
}

鑰匙幀調整了整個動畫持續時間的每個梯度段的background-size 。

另外，將大小固定到20% 50%並使位置動畫會產生不同的結果：

 .loader { / * ...以前的樣式... * /
  動畫：加載1S無限線性；
}
@keyframes load {
  / * ...位置動畫鍵幀... */
}

通過操縱尺寸和位置，可以實現無數的裝載機變化。更複雜的梯度進一步擴展了設計選擇。演示中的大多數示例都使用相同的標記和样式，僅在動畫組合方面有所不同。

通過高級技術增強

DOTS文章中的掩蔽技術可以在此處應用。用蒙版background-* mask-*屬性並添加梯度會創建視覺吸引人的裝載機。核心技術在點和條之間保持一致：漸變定義形狀，動畫修改了大小/位置，並且遮罩增加了顏色。

四捨五入

一種不同的方法使用::before和::after創建三個圓形條：

 .loader { / * ...使用CSS變量用於大小和位置的樣式... * /}

通過在每個元素中仔細定位各個梯度來模擬連續梯度效應。用延遲來動畫高度會產生各種動畫。

結論

本文演示了使用最小代碼創建複雜的加載動畫的多功能性。通過結合單個元素，漸變，偽元素和動畫，可以實現大量的加載動畫設計。提供的示例和技術鼓勵實驗並創建獨特的，視覺上吸引人的裝載機。

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