单元素加载程序：前进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中文网其他相关文章！