巧用 -webkit-box-reflect 倒影实现各类动效(小结)


Posted in HTML / CSS onApril 22, 2021

在很久之前的一篇文章,有讲到 -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 基本用法

-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 倒影实现各类动效(小结)

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

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

效果如下,生成了一个元素右侧的镜像元素:

巧用 -webkit-box-reflect 倒影实现各类动效(小结)

设置倒影距离

在方向后面,还可以接一个具体的数值大小,表示倒影与原元素间的距离。

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

加上 10px 之后,倒影与原元素间将间隔 10px

巧用 -webkit-box-reflect 倒影实现各类动效(小结)

设置倒影虚实

还有一个非常重要的功能,就是方位后面,还能再设置一个渐变值,利用这个渐变值,可以实现倒影的一个虚化效果,这一点非常重要。

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

巧用 -webkit-box-reflect 倒影实现各类动效(小结)

CodePen Demo -- -webkit-box-reflect Demo

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

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

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

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

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

巧用 -webkit-box-reflect 倒影实现各类动效(小结)

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

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

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

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

巧用 -webkit-box-reflect 倒影实现各类动效(小结)

CodePen demo - Font & -webkit-box-reflect

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

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

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

巧用 -webkit-box-reflect 倒影实现各类动效(小结)

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%);
}

巧用 -webkit-box-reflect 倒影实现各类动效(小结)

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

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

得到:

巧用 -webkit-box-reflect 倒影实现各类动效(小结)

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

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

巧用 -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;
}

巧用 -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 层倒影得到的图形:

巧用 -webkit-box-reflect 倒影实现各类动效(小结)

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

巧用 -webkit-box-reflect 倒影实现各类动效(小结)

完整的代码,可以戳这里:CodePen Demo -- -webkit-box-reflect artist

最后

本文到此结束,希望对你有帮助 ?,本文介绍了 webkit-box-reflect 的一些有意思的用法,可能业务中不太实用,但是非常有趣。

到此这篇关于巧用 -webkit-box-reflect 倒影实现各类动效(小结)的文章就介绍到这了,更多相关-webkit-box-reflect 倒影内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
CSS预处理框架——Stylus
Apr 21 #HTML / CSS
基于CSS3画一个iPhone
CSS3 实现NES游戏机的示例代码
css实现文章分割线样式的多种方法总结
Apr 21 #HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 #HTML / CSS
CSS3鼠标悬浮过渡缩放效果
You might like
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
fgetcvs在linux的问题
2012/01/15 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
python操作redis方法总结
2018/06/06 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
面料业务员岗位职责
2013/12/26 职场文书
高中生操行评语大全
2014/04/25 职场文书
洗手间标语
2014/06/23 职场文书
亲戚关系证明
2015/06/24 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python