通过一张图教会你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教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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 分页类 扩展代码
2009/06/11 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
python连接数据库的方法
2017/10/19 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
python实现超级马里奥
2020/03/18 Python
Python定义函数实现累计求和操作
2020/05/03 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
护理自我鉴定范文
2013/10/06 职场文书
大学毕业生通用自荐信范文
2013/10/31 职场文书
公司财务自我评价分享
2013/12/17 职场文书
项目副经理岗位职责
2013/12/30 职场文书
安全生产先进个人材料
2014/02/06 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
期末评语大全
2014/05/04 职场文书
2015年党总支工作总结
2015/05/25 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python