巧用webkitboxreflect倒影实现各类动效

在很久之前的一篇文章，有讲到 -webkit-box-reflect 这个属性 -- 从倒影说起，谈谈 CSS 继承 inherit

-webkit-box-reflect 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。

上一次写它，它的兼容性还非常非常的惨淡，但是到今天，虽然还是一个 Non-standard 的语法，但是兼容性已经大有改观，并且利用它，我们可以实现非常多有意思的效果。

截止至 2021-02-19，它的兼容性已经达到了 91.02%，看看 CANIUSE -webkit-box-reflect：

CodePen Demo -- -webkit-box-reflect Demo

使用 -webkit-box-reflect 实现一些有意思的动效

掌握了基本的语法后，我们就可以利用其实现一些有意思的动效，下面简单罗列一下。

我发现这个属性特别适合运用在一些暗黑系风格的页面中。能够让很多动效看起来高大上很多。（个人审美）

在按钮中运用 -webkit-box-reflect

配合一些动态边框动画的按钮，能够营造一种很科幻的效果：

感兴趣的可以自行戳源码了解了解：

CodePen demo -webkit-box-reflect Neon Button Hover Effect

在文字中运用 -webkit-box-reflect

在暗黑系的标题文字中，运用上 -webkit-box-reflect ，瞬间高大上了不少。

CodePen demo - Font & -webkit-box-reflect

在 3D 中运用 -webkit-box-reflect

嘿嘿，接下来，我们甚至可以把 -webkit-box-reflect 运用中 3D 效果中，完全不一样的观感体验。

我们给一个 3D 照片墙，加上倒影效果：

CodePen demo - 3DView & -webkit-box-reflect

使用 -webkit-box-reflect 创造艺术图案

有趣的 CSS 艺术，它又来了。

在袁川老师的这篇文章中 -- Chinese Window Lattice And CSS，介绍了利用 -webkit-box-reflect 生成剪纸艺术这样一种思路。

由于 -webkit-box-reflect 可以生成倒影，那么我们利用它进行不断的套娃，一层叠一层，那么只需要生成一个基本的元素，就可以利用倒影产生出各种不同的效果。

假设，我们有如下结构：

我们只需要给 .g-wrap4 实现一个图形，例如这样：

.g-wrap4 {
background:
radial-gradient(circle at 0 0, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%),
radial-gradient(circle at 100% 100%, #000 10%, transparent 10%, transparent 30%, #000 30%, #000 40%, transparent 40%);
}


然后就是 4 层套娃， 首先给 .g-wrap4 加上一层倒影 -webkit-box-reflect：

.g-wrap4 {
-webkit-box-reflect: right 0px;
}


得到：

继续套娃，给 .g-wrap3 加上一层倒影 -webkit-box-reflect：

.g-wrap4 {
-webkit-box-reflect: right 0px;
}
.g-wrap3 {
-webkit-box-reflect: below 0px;
}


继续，给 .g-wrap2 加上一层倒影 -webkit-box-reflect：

.g-wrap4 {
-webkit-box-reflect: right 0px;
}
.g-wrap3 {
-webkit-box-reflect: below 0px;
}
.g-wrap2 {
-webkit-box-reflect: left 0px;
}


最后，给 .g-wrap1 加上一层倒影 -webkit-box-reflect：

.g-wrap4 {
-webkit-box-reflect: right 0px;
}
.g-wrap3 {
-webkit-box-reflect: below 0px;
}
.g-wrap2 {
-webkit-box-reflect: left 0px;
}
.g-wrap1 {
-webkit-box-reflect: above 0px;
}


就可以得到一个通过 4 层倒影得到的图形：

这样，通过不同的基础图形，发挥我们的想象力，就可以生成各式各样的剪纸对称图形：

完整的代码，可以戳这里：

CodePen Demo -- -webkit-box-reflect artist

最后

本文到此结束，希望对你有帮助