单元素加载程序：条

本文探讨了使用条形图和以前针对旋转器和点的文章中使用的灵活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中文网其他相关文章！