單元素加載程序：點

本文探討了使用單個DIV元素創建加載動畫。我們已經剖析了旋轉裝載機；現在，讓我們解決另一個熟悉的動畫：點。

點裝載機無處不在。他們的吸引力在於他們的簡單性：三個點，類似於文本省略（…），執行動態視覺序列。

系列概述

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

我們的目標是僅使用一個Div複製該動畫，從而消除了每個點或單獨動畫的單個Div的需求。上面的示例使用單個Div，CSS和無偽元素來實現這一目標，並巧妙地結合了背景和遮罩技術。通過使背景梯度動畫創建變色點的幻覺。

動畫背景

讓我們從背景動畫開始：

 .loader {
  寬度：180px;
  方面比例：8/5;
  背景： 
    圓錐梯度（紅色50％，藍色0）無重複， 
    圓錐梯度（綠色50％，紫色0）無重複；
  背景大小：200％50％； 
  動畫：背面4S無限線性；
}

@keyframes back {
  0％，100％{背景位置：0％0％，0％100％; }
  25％{背景位置：100％0％，0％100％； }
  50％{背景位置：100％0％，100％100％; }
  75％{背景位置：0％0％，100％100％; }
}

180px範圍的.loader元素顯示出兩個具有鋒利顏色過渡的圓錐梯度。上半場使用紅色和藍色，下半部分綠色和紫色。 200％的寬度可確保每半時都能看到一種顏色。動畫在位置上循環，從而產生了色彩變化的幻想。

要深入了解background-position ，請參閱此堆棧溢出答案。動畫巧妙地操縱了梯度的X和Y坐標。

為什麼conic-gradient()而不是linear-gradient() ？

使用conic-gradient()更簡潔，並取得相同的結果。

通過將動畫的時序函數從linear調整到steps(1) ，我們消除了顏色閃爍。

創建點

與上一篇文章一樣，我們使用CSS面具。面具使我們能夠選擇性地揭示背景的一部分。在這裡，我們將創建點，通過它們揭示背景梯度。

我們將採用radial-gradient() ：

 .loader {
  / * ...以前的樣式... */
  -_ g：徑向級別（＃000 68％，＃0000 71％）no-repeat;
  蒙版：var（-_ g），var（-_ g），var（-_ g）;
  面具大小：25％40％；
}

CSS變量， --_g ，簡化了代碼。三個徑向梯度創建點。

現在，我們需要一個動畫來移動點：

 .loader {
  / * ...以前的樣式... */
  動畫：加載2S無限；
}

@keyframes load {
  0％，100％{mask-position：0％0％，50％0％，100％0％; }
  16.67％{mask-position：0％100％，50％0％，100％0％; }
  33.33％{mask-position：0％100％，50％100％，100％0％; }
  50％{mask-position：0％100％，50％100％，100％100％; }
  66.67％{mask-position：0％0％，50％100％，100％100％; }
  83.33％{mask-position：0％0％，50％0％，100％100％; }
}

該動畫調整了每個點mask-position的Y坐標，從而創建了上下移動。將其與梯度動畫相結合會產生最終效果。

變化和進一步的例子

CSS變量可輕鬆調整顏色和尺寸調整。也可以通過修改密鑰框來創建不同的動畫。此處提供了進一步的示例，包括單點加載程序和Blobby效應加載程序。還顯示了CSS網格方法，簡化了尺寸和定位。

結論和下一步

本文演示了使用單個Div創建點加載程序。下一篇文章將涵蓋在這裡學到的技術的基礎上。

系列概述

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

(Remember to replace https://www.php.cn/link/9fc36fa768a74fa93d3ee7bf57b1392c and https://www.php.cn/link/0c6ba56676353996dff5efb2b7789e1e with actual links if you have them.)

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