巧用 CSS3的webkit-box-reflect 倒影实现各类动效


Posted in HTML / CSS onMarch 05, 2021

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

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

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

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

巧用 CSS3的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');
}

巧用 CSS3的webkit-box-reflect 倒影实现各类动效

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

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

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

巧用 CSS3的webkit-box-reflect 倒影实现各类动效

设置倒影距离

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

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

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

巧用 CSS3的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

巧用 CSS3的webkit-box-reflect 倒影实现各类动效

CodePen Demo -- -webkit-box-reflect Demo

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

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

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

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

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

巧用 CSS3的webkit-box-reflect 倒影实现各类动效

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

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

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

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

巧用 CSS3的webkit-box-reflect 倒影实现各类动效

CodePen demo - Font & -webkit-box-reflect

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

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

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

巧用 CSS3的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%);
}

巧用 CSS3的webkit-box-reflect 倒影实现各类动效

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

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

得到:

巧用 CSS3的webkit-box-reflect 倒影实现各类动效

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

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

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

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

巧用 CSS3的webkit-box-reflect 倒影实现各类动效

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

巧用 CSS3的webkit-box-reflect 倒影实现各类动效

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

CodePen Demo -- -webkit-box-reflect artist

最后

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

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

HTML / CSS 相关文章推荐
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 #HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 #HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 #HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 #HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 #HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 #HTML / CSS
CSS3选择器新增问题的实现
Jan 21 #HTML / CSS
You might like
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
Python性能优化的20条建议
2014/10/25 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
2019年干货:自我鉴定
2019/03/25 职场文书
python爬虫selenium模块详解
2021/03/30 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python