巧用css3的-webkit-box-reflect 倒影属性实现各种特效
-webkit-box-reflect
是一个非常有意思的属性,它让 CSS 有能力像镜子一样,反射我们元素原本绘制的内容。
接下来我带大家利用-webkit-box-reflect
这个属性巧妙的实现一些有意思的效果,废话不多说一起来看一下。
语法
box-reflect:none | <direction> <offset> <mask-box-image> <direction> = above | below | left | right <offset> = <length> | <percentage> <mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> 默认值:none
取值
- none:
- 无倒影
<direction>
- above:
- 指定倒影在对象的上边
- below:
- 指定倒影在对象的下边
- left:
- 指定倒影在对象的左边
- right:
- 指定倒影在对象的右边
<offset>
- <length>:
- 用长度值来定义倒影与对象之间的间隔。可以为负值
- <percentage>:
- 用百分比来定义倒影与对象之间的间隔。可以为负值
<mask-box-image>
- none:
- 无遮罩图像
- <url>:
- 使用绝对或相对地址指定遮罩图像。
- <linear-gradient>:
- 使用线性渐变创建遮罩图像。
- <radial-gradient>:
- 使用径向(放射性)渐变创建遮罩图像。
- <repeating-linear-gradient>:
- 使用重复的线性渐变创建背遮罩像。
- <repeating-radial-gradient>:
- 使用重复的径向(放射性)渐变创建遮罩图像。
兼容性
截止至 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 个方向可以选。
假设我们有如下一张图片:
然后,我们加上 -webkit-box-reflect: right
,也就是右侧的倒影,详细代码如下。
HTML 代码:
<div></div>
CSS 代码:
div { margin: 50px auto 200px; border-radius: 10px; width: 160px; height: 222px; background-image: url(images/test.jpg); background-size: cover; -webkit-box-reflect: right; }
效果如下,生成了一个元素右侧的镜像元素:
关键代码:
-webkit-box-reflect: right
设置倒影距离
在方向后面,还可以接一个具体的数值大小,表示倒影与原元素间的距离。
-webkit-box-reflect: right 10px;
加上 10px
之后,倒影与原元素间将间隔 10px
:
设置倒影虚实
还有一个非常重要的功能,就是方位后面,还能再设置一个渐变值,利用这个渐变值,可以实现倒影的一个虚化效果,这一点非常重要。
-webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
看看效果,有了虚实变化之后,这样就更像是一个倒影.
其实,这里的渐变就是给倒影的图片添加了一个 MASK 属性,MASK 属性的 transparent
部分,图片将变得透明,而实色部分,则保持原图。
关于 mask 相关文章推荐阅读《css mask 属性实现视频弹幕人物遮罩过滤效果》
使用 -webkit-box-reflect 实现一些有意思的动效
掌握了基本的语法后,我们就可以利用其实现一些有意思的动效,下面简单罗列一下。
我发现这个属性特别适合运用在一些暗黑系风格的页面中。能够让很多动效看起来高大上很多。(个人审美)
在按钮中运用 -webkit-box-reflect
配合一些动态边框动画的按钮,能够营造一种很科幻的效果:
HTML 代码:
<div class="btn">mybj</div> <div class="btn btn1">mybj</div> <div class="btn btn2">mybj</div> <div class="btn btn3">mybj</div>
CSS 代码:
:root { --color: #0ebeff; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; } *, *::before, *::after { box-sizing: border-box; } @keyframes rotate { 100% { transform: translate(-50%, -50%) rotate(1turn); } } .btn { position: relative; z-index: 0; width: 160px; height: 80px; line-height: 80px; color: var(--color); font-size: 24px; border-radius: 10px; text-align: center; margin: auto; overflow: hidden; cursor: pointer; transition: 0.3s; -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4)); } .btn:hover { color: #fff; box-shadow: 0 0 5px var(--color), 0 0 25px var(--color); } .btn:hover::after, .btn:hover::before { transition: 0.3s; background: var(--color); } .btn::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150%; height: 300%; background-color: #000; background-repeat: no-repeat; background-size: 50% 50%; background-position: 0 0; background-image: conic-gradient(var(--color), var(--color)); animation: rotate 2s linear infinite; } .btn::after { content: ""; position: absolute; z-index: -1; left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); background: #000; border-radius: 10px; } .btn1 { filter: hue-rotate(180deg); } .btn2 { filter: hue-rotate(270deg); } .btn3 { filter: hue-rotate(90deg); }
在文字中运用 -webkit-box-reflect
在暗黑系的标题文字中,运用上 -webkit-box-reflect
,瞬间高大上了不少。
HTML 代码:
<p>Lorem ipsum dolor </p>
CSS 代码:
html, body { width: 100%; height: 100%; display: flex; background: #000; } p { font-size: 80px; font-weight: bold; color: #44ffa9; margin: auto; transform: skewX(-10deg); white-space: nowrap; letter-spacing: 4px; text-shadow: 0px 0px #379569, 0.5px 0.25px rgba(56, 148, 105, 0.975), 1px 0.5px rgba(57, 147, 105, 0.95), 1.5px 0.75px rgba(58, 146, 105, 0.925), 2px 1px rgba(59, 145, 105, 0.9), 2.5px 1.25px rgba(60, 144, 105, 0.875), 3px 1.5px rgba(61, 143, 105, 0.85), 3.5px 1.75px rgba(62, 142, 105, 0.825), 4px 2px rgba(63, 141, 105, 0.8), 4.5px 2.25px rgba(64, 140, 105, 0.775), 5px 2.5px rgba(65, 139, 104, 0.75), 5.5px 2.75px rgba(66, 138, 104, 0.725), 6px 3px rgba(67, 137, 104, 0.7), 6.5px 3.25px rgba(68, 136, 104, 0.675), 7px 3.5px rgba(69, 135, 104, 0.65), 7.5px 3.75px rgba(70, 134, 104, 0.625), 8px 4px rgba(71, 133, 104, 0.6), 8.5px 4.25px rgba(72, 132, 104, 0.575), 9px 4.5px rgba(73, 131, 104, 0.55), 9.5px 4.75px rgba(74, 130, 104, 0.525), 10px 5px rgba(75, 129, 104, 0.5), 10.5px 5.25px rgba(77, 128, 104, 0.475), 11px 5.5px rgba(78, 126, 104, 0.45), 11.5px 5.75px rgba(79, 125, 104, 0.425), 12px 6px rgba(80, 124, 103, 0.4), 12.5px 6.25px rgba(81, 123, 103, 0.375), 13px 6.5px rgba(82, 122, 103, 0.35), 13.5px 6.75px rgba(83, 121, 103, 0.325), 14px 7px rgba(84, 120, 103, 0.3), 14.5px 7.25px rgba(85, 119, 103, 0.275), 15px 7.5px rgba(86, 118, 103, 0.25), 15.5px 7.75px rgba(87, 117, 103, 0.225), 16px 8px rgba(88, 116, 103, 0.2), 16.5px 8.25px rgba(89, 115, 103, 0.175), 17px 8.5px rgba(90, 114, 103, 0.15), 17.5px 8.75px rgba(91, 113, 103, 0.125), 18px 9px rgba(92, 112, 103, 0.1), 18.5px 9.25px rgba(93, 111, 103, 0.075), 19px 9.5px rgba(94, 110, 103, 0.05), 19.5px 9.75px rgba(95, 109, 102, 0.025), 20px 10px rgba(96, 108, 102, 0); -webkit-box-reflect: below 5px linear-gradient(transparent 30%, rgba(0, 0, 0, 0.35)); filter: contrast(5); }
在 3D 中运用 -webkit-box-reflect
接下来,我们甚至可以把 -webkit-box-reflect
运用中 3D 效果中,完全不一样的观感体验。
我们给一个 3D 照片墙,加上倒影效果。
感兴趣的可以看一下源码:
使用 -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
最后
以上就是今天码云笔记分享的 css 技术笔记,主要介绍了 -webkit-box-reflect
的一些有意思的用法,希望对你有帮助,可能业务中不太实用,但是非常有趣。
码云笔记 » 巧用css3的-webkit-box-reflect 倒影属性实现各种特效