巧用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 基本用法

-webkit-box-reflect 的语法非常简单,最基本的用法像是这样:

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

其中,below 可以是 below | above | left | right 代表下上左右,也就是有 4 个方向可以选。

假设我们有如下一张图片:

-webkit-box-reflect测试图片

然后,我们加上 -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

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

在按钮中运用 -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 ,瞬间高大上了不少。

在文字中运用 -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 照片墙,加上倒影效果。

感兴趣的可以看一下源码:

CodePen demo

使用 -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-wrap4 加上一层倒影

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

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

得到:

给 .g-wrap3 加上一层倒影 -webkit-box-reflect

继续,给 .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-wrap2 加上一层倒影 -webkit-box-reflect

最后,给 .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 层倒影得到的图形:

通过 4 层倒影得到的图形

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

各式各样的剪纸对称图形

完整的代码,可以戳这里:

CodePen Demo — -webkit-box-reflect artist

最后

以上就是今天码云笔记分享的css技术笔记,主要介绍了 -webkit-box-reflect 的一些有意思的用法,希望对你有帮助,可能业务中不太实用,但是非常有趣。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 巧用css3的-webkit-box-reflect 倒影属性实现各种特效

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们