关于CSS反射倒影的研究思考

原文地址：https://css-tricks.com/state-css-reflections

译者：nzbin

友情提示：由于演示demo的兼容性，推荐火狐浏览。该文章篇幅较长，内容庞杂，有一定难度。而我本人学识有限，加之时间仓促，所翻译内容可能有不恰当及晦涩之处。欢迎大家拍砖指正。

我最近在codePen上看到了这个 加载程序，一个纯CSS制作的带有渐变反射的3D旋转竖条。它的制作方法是：为每个竖条创建一个元素，然后通过复制每一个元素来制作反射倒影，最后在反射倒影上添加渐变背景来制作渐隐的效果。听上去有点复杂，而且创建渐隐效果的渐变背景在非纯色背景下是无效的。有没有更好的CSS方法呢？

答案是‘肯定’的，也是‘否定’的。‘肯定’是因为确实有可以做的方法，‘否定’是因为有些方法还不存在。令人遗憾的是，这些代码只能用预处理器（主要通过循环来实现压缩功能）压缩一点点。如果我们不想使用canvas并且想兼容主流浏览器的当前版本，复制竖条来制作倒影以及通过渐变背景来制作渐隐效果的方法仍然是最好的。

这篇文章主要探索现有的制作反射倒影的方法、举例说明可能的解决方案、跨浏览器问题以及我的一些想法。

Demo的基本设置

#创建竖条元素

首先我们创建一个 .loader 元素以及在其中创建10个 .bar 元素

HTML

查看更多关于关于CSS反射倒影的研究思考的详细内容...