CSS 小技巧之单标签 loader
本文翻译自 How to create a CSS-only loader with one element，作者： Temani Afif， 略有删改。
loader组件是网站的重要组成部分。它可以用在许多地方，我们需要显示的内容正在加载中。这样的组件需要尽可能简单，在这篇文章中我们将学习如何使用优化的代码创建不同的 CSS 加载器。
所有的loader它们只需使用一个元素，我们将剖析其中一些元素的代码。
经典 CSS loader 组件
我们从第四个和第五个loader开始解析，这两个loader都依赖于clip-path动画。
主要的技巧是使用等宽字体来确保所有的字符都有相同的宽度，然后我们使用clip-path来显示/隐藏一些字符。对于第四个加载器，我简单地考虑最后的 3 个点，这里有一个图来说明这个技巧：
开始我们使用inset(0 3ch 0 0)隐藏所有的点。这意味着我们在右侧隐藏了一个等于 3ch 的宽度（只有三个字符）。然后我们将其动画化为inset(0 -1ch 0 0)。
ch：相对长度单位。相对于 "0"（零）的宽度
直觉上我们应该使用inset(0 0 0 0)来显示所有的点，如果我们想创建一个像下面这样的连续动画，这是正确的：
但是我们想要一个使用steps()的离散动画，我们需要通过一个额外的字符超出元素边界。
我们对第五个loader做了同样的事情，但是我们使用inset(0 3ch 0 0)隐藏了所有的文本，而不是使用inset(0 100% 0 0)只隐藏 3 个点。同样的逻辑，两个不同的loader！
接下来看看第七和第八个loader。此处依靠渐变动画。下面是一个分步说明来理解这个使用技巧：
我们首先从创建和动画渐变开始。诀窍是一个渐变的两种颜色，有一个宽度比主要两倍大的元素，然后我们从右向左滑动渐变，在两种颜色之间交换。
和前面的loader一样，我们添加了一个额外的 1ch，这是以后离散动画所需要的。
然后使用该渐变为文本而不是背景着色background-clip:text;，并使用步长将线性动画更新为离散动画animation: c1 2s infinite steps(11);。就这么简单的完成了！
我还使用了text-shadow技巧，一些loader的想法是复制“loading...”文本使用阴影，然后增加动画。
例如上述集合中的第九个加载器：
通过设置text-shadow得到五个阴影层，每次我更新 X 偏移来创建一个滑动动画。下面是我们忽略overflow属性得到的结果：
通过设置第一层和最后一层相同的颜色，我们就能得到一个连续的动画，再加上超出隐藏溢出，完美的错觉看不出破绽！
方形翻转 CSS loader
让我们试一下另一种类型的loader效果。
这一次我们使用旋转和透视来创建翻转正方形的 3D 错觉。如果我们检查第一个加载器的代码，我们可以看到代码如下：
注意perspective的使用，这是创建翻转动画的关键。没有它我们得到的就是下面这样的效果：
很明显，第一个并不酷。
其余的加载器都使用相同的技巧，通过添加更多的动画来每次获得不同的变化。对于第二个，我们更新了翻转后的背景颜色，以模拟具有两个不同面的元素。
第二个动画是离散的（它使用steps(1)），持续时间等于旋转动画持续时间的一半。通过这种配置，当元素在视觉上对我们不可见时，颜色将在 90deg 处改变。这将使错觉变得完美：我们的大脑会认为它是一个双面元素，而在现实中，它只是一个面，只不过是在90deg时立即改变其颜色。
对于第三个装载机，我使用了两个旋转：
我在 X 轴上做第一个旋转，在 Y 轴上做另一个旋转。对于着色，我们现在有三种颜色，但逻辑仍然是一样的。我在90deg角度做了一个瞬间的颜色变化，以创造翻转的错觉。
下面是一个演示，以更好地看到效果：
其他剩余加载器的代码主要的技巧是相同的。每次我都让动画变得更复杂，为完整的动画添加更多的步骤，但我总是依赖于旋转结合透视和颜色变化产生的错觉。
更多 CSS Loaders
在本文中我们介绍了一些 CSS 技巧，这些技巧允许我们创建大约 20 个不同的单元素 CSS 加载器，但我们可以做更多。我收集了 500 多个加载器效果，有兴趣的可以看看原文地址。
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
版权声明: 本文为 InfoQ 作者【南城FE】的原创文章。
原文链接:【http://xie.infoq.cn/article/3669bfcb92cc5f92a097a66cb】。文章转载请联系作者。
还未添加个人签名 2019-02-12 加入
专注前端开发，分享前端知识
评论