乐趣区

关于css:巧用-webkitboxreflect-倒影实现各类动效

jiezi

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

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

上一次写它，它的兼容性还十分十分的惨淡，然而到明天，尽管还是一个 Non-standard 的语法，然而兼容性曾经大有改观，并且利用它，咱们能够实现十分多有意思的成果。

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

接下来进入注释。

-webkit-box-reflect 根本用法

-webkit-box-reflect 的语法非常简单，最根本的用法像是这样：

div {-webkit-box-reflect: below;}

其中，below 能够是 below | above | left | right 代表下上左右，也就是有 4 个方向能够选。

假如咱们有如下一张图片：

<div></div>
div {background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
}

加上 -webkit-box-reflect: right，也就是右侧的倒影：

div {background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: right;
}

成果如下，生成了一个元素右侧的镜像元素：

设置倒影间隔

在方向前面，还能够接一个具体的数值大小，示意倒影与原元素间的间隔。

div {background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: right 10px;
}

加上 10px 之后，倒影与原元素间将距离 10px：

设置倒影虚实

还有一个十分重要的性能，就是方位前面，还能再设置一个突变值，利用这个突变值，能够实现倒影的一个虚化成果，这一点十分重要。

div {background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
}

看看成果，有了虚实变动之后，这样就更像是一个倒影.

其实，这里的突变就是给倒影的图片增加了一个 MASK 属性，MASK 属性的 transparent 局部，图片将变得通明，而实色局部，则放弃原图。

对于 CSS MASK 属性，如果你还有什么疑难，倡议看看这篇文章：微妙的 CSS MASK

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 能够生成倒影，那么咱们利用它进行一直的套娃，一层叠一层，那么只须要生成一个根本的元素，就能够利用倒影产生出各种不同的成果。

假如，咱们有如下构造：

<div class="g-wrap1">
    <div class="g-wrap2">
        <div class="g-wrap3">
            <div class="g-wrap4"></div>
        </div>
    </div>
</div>

咱们只须要给 .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

最初

本文到此结束，心愿对你有帮忙 :)，本文介绍了 webkit-box-reflect 的一些有意思的用法，可能业务中不太实用，然而十分乏味。

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 ????

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版