通过一张图教会你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教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
Ant Design的Table组件去除
2020/10/24 Javascript
python实现的一个火车票转让信息采集器
2014/07/09 Python
python排序方法实例分析
2015/04/30 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
python得到电脑的开机时间方法
2018/10/15 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
在django中自定义字段Field详解
2019/12/03 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
python中yield的用法详解
2021/01/13 Python
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
工程力学专业自荐信范文
2014/03/17 职场文书
假面舞会策划方案
2014/05/29 职场文书
校庆标语集锦
2014/06/25 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
毕业生自荐信范文
2015/03/05 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers