通过一张图教会你CSS3倒影的实现


Posted in HTML / CSS onSeptember 26, 2017

前言

本文主要给大家介绍了关于CSS3倒影实现的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

效果图如下:

通过一张图教会你CSS3倒影的实现
示例图片

在CSS3之前,想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式,而CSS3问世之后,想要实现这样的效果变得非常简单,只需一个CSS3属性就可以轻松实现了。

这就是今天所要提到的box-reflect属性。

咱们先看看W3C给出的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

box-reflect可给两种属性值,一种是none,为默认值,也就是没有任何倒影效果,另一种才是我们今天所要讲的,它可以同时赋予三个属性值,它们依次代表倒影方向、元素与倒影之间的距离以及加在倒影上的遮罩图像,其中后两个属性值可以缺省,但如果<mask-box-image>存在,则<offset>必填。

说了那么多干巴巴的解释,还是联系一下示例应该更好理解些吧。

我们现在来一步步地实现文章开头示例图片的投影效果:

①只给一个属性值below。

<!--HTML代码-->
< img class="img" src="imgs/cat.jpg" />
/*CSS代码*/
.img{ -webkit-box-reflect: below; box-reflect: below;}

实现效果:

通过一张图教会你CSS3倒影的实现

②再加个5px的间距。

/*CSS代码*/
.img{ -webkit-box-reflect: below 5px; box-reflect: below 5px;}

实现效果:

通过一张图教会你CSS3倒影的实现

③最后加个图片遮罩吧。

/*CSS代码*/
.img{ -webkit-box-reflect: below 5px -webkit-linear-gradient(transparent 60%,rgba(0,0,0,.3));
box-reflect: below 5px linear-gradient(transparent 60%,rgba(0,0,0,.3));}

这里的图片遮罩没有用图片,而是用了CSS3中的linear-gradient属性值,它就是用于线性渐变,具体用法这里就不提了,可以直接看这里(https://3water.com/css/369475.html),写得很详细。

实现效果:

通过一张图教会你CSS3倒影的实现

这就是文章开头示例图片的最终效果。

接下来,再说说径向渐变创建图片遮罩和直接使用图片遮罩。

径向渐变的话其实跟线性渐变类似,只需要你掌握CSS3中基本的径向渐变方法,给个简单示例吧:

/*CSS代码*/
.img{ -webkit-box-reflect: left 0 -webkit-radial-gradient(#000 30%,transparent);
 box-reflect: left 0 radial-gradient(#000 30%,transparent);}

实现效果:

通过一张图教会你CSS3倒影的实现

效果很棒!好像猫咪真的在照镜子一样~~

那如果直接使用图片遮罩呢?比如说我用这样一张图片作为遮罩:

通过一张图教会你CSS3倒影的实现

/*CSS代码*/
.img{ -webkit-box-reflect: right 0 url(imgs/mask.png); box-reflect: right 0 url(imgs/mask.png);}

实现效果:

通过一张图教会你CSS3倒影的实现
mask.png

可以看出,遮罩图片会完全拉伸填充倒影图片,并且效果是完全透明部分不会显示出来(其实CSS3渐变图片遮罩原理也跟这个是一样的)。

需要注意的是:以上讲的所有效果不仅仅可以用在图片上,用在其他元素上也是完全可以的,比如说文字。

兼容性:box-reflect虽然看起来效果很不错,但是遗憾的是,目前只有webkit内核浏览器兼容,不过移动端基本已经没有任何问题啦~~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。
 

HTML / CSS 相关文章推荐
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 #HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 #HTML / CSS
css3 pointer-events 介绍详解
Sep 18 #HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 #HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 #HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 #HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 #HTML / CSS
You might like
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
Python连接DB2数据库
2016/08/27 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
tensorflow自定义激活函数实例
2020/02/04 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
Python换行与不换行的输出实例
2020/02/19 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
护理不良事件检讨书
2014/02/06 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
医生辞职信范文
2015/03/02 职场文书
五一放假通知怎么写
2015/08/18 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL