單元素加載程序：前進3D！

我們的單元素加載程序系列的最終部分探討了3D設計。創建一個只有一個HTML元素的令人信服的3D立方體似乎是不可能的，但是通過巧妙地呈現三個可見的面孔，我們可以實現類似立方體的效果。讓我們構建它！

系列回顧

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

分裂立方體裝載機

該加載程序將一個立方體拆分為兩個，但僅使用一個HTML元素。每半是使用偽元素創建的（ ::before和::after ）。

魔術在於結合圓錐梯度，CSS clip-path和負邊緣。圓錐梯度將面部顏色， clip-path塑造它們，負邊緣與偽元素重疊以模擬完整的立方體。動畫使裝載機栩栩如生。

視覺表示闡明了clip-path計算：（圖將放置在此處，類似於原始圖）

讓我們編碼。首先，我們設置了.loader元素：

 .loader {
  -s：150px; / *尺寸控制 */
  -_ d：calc（0.353 * var（-s））; / * 0.353 = sin（45deg）/2 */

  寬度：calc（var（-s）var（-_ d））;
  方面比例：1;
  顯示：Flex;
}

接下來，偽元素：

 .loader ::之前，
.loader :: efter {
  內容： ””;
  彈性：1;
}

應用圓錐梯度：

 .loader ::之前，
.loader :: efter {
  背景：CONIC-GRADIENT（來自-90deg at Calc（100％-var（-_d））var（-_d），#FFF 135DEG，＃666 0 270DEG，#AAA 0）;
}

剪輯梯度：

 .loader ::之前，
.loader :: efter {
  剪輯path：polygon（var（-_ d）0，100％0，100％calc（100％-var（-_ d）），calc（100％-var（-_d））100％，0 100％，0 var（-_ d））;
}

使用負邊緣重疊一半：

 .loader :: {邊緣右：calc（var（-_d） / -2）; }
.loader :: After {margin-Left：calc（var（-_d） / -2）; }

最後，動畫：

 .loader ::之前，
.loader :: efter {
  動畫：加載1.5s無限立方bezier（0，.5，.5，1.8）替代；
}
.loader :: After {animation -delay：-.75s; }

@keyframes load {
  0％，40％{轉換：translatey（calc（var（-s） / -4））; }
  60％，100％{轉換：translatey（calc（var（-s） / 4））; }
}

（最終演示將在此處顯示）

進度立方體裝載機

讓我們適應3D進度裝載機的技術 - 仍然帶有一個元素！立方體模擬保持不變，但是我們調整了高度和縱橫比。動畫巧妙地使用flex-grow: 1隨著左側寬度的增加，填充其餘空間。

向右側添加透明度：

 .loader :: After {不透明度：0.4; }

使用background-color和background-blend-mode更改左側的顏色：

 .loader :: {
  背景色：＃cc333f;
  背景融合模式：乘法；
}

動畫左側的寬度：

 @keyframes load {
  0％，5％{width：var（-_ d）; }
  95％，100％{寬度：100％; }
}

（改進的演示將在此處顯示，解決底部問題）

完整的代碼，包括底部的修復：（此處包括完整代碼）

（類似於原始的3D示例和解釋，要維護圖像放置和格式化）

這證明了CSS通過最小標記創造複雜效果的力量。實驗並創建自己的變體！

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