用CSS3的box-reflect来制作倒影效果


Posted in HTML / CSS onNovember 15, 2016

兼容性

既然是CSS3的属性,我们当然要来看看兼容性:点击查看

接下来,我们来了解box-reflect如何使用?

语法如下:

-webkit-box-reflect:none | <direction> <offset>? <mask-box-image>?
  box-reflect:none | <direction> <offset>? <mask-box-image>?

属性说明:

none:此值为默认值,表示无倒影;

direction:生成倒影的方向

above:指定倒影在对象的上边 below:指定倒影在对象的下边 left:指定倒影在对象的左边 right:指定倒影在对象的右边

offset:图片与倒影间隔

length:用长度值来定义倒影与对象之间的间隔。可以为负值 percentage:用百分比来定义倒影与对象之间的间隔。可以为负值

mask-box-image:用来设置倒影的遮罩效果;

值可以是:

none:无遮罩图像 url:使用绝对或相对地址指定遮罩图像。 linear-gradient:使用线性渐变创建遮罩图像。 radial-gradient:使用径向(放射性)渐变创建遮罩图像。 repeating-linear-gradient:使用重复的线性渐变创建背遮罩像。 repeating-radial-gradient:使用重复的径向(放射性)渐变创建遮罩图像。

光是纸上谈兵可不行,我们还是要通过实例来看看效果。

倒影的方向

在这个例子中,我弄了三个img:

<div class="box1">   
  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" />   
</div>   
<div class="box2">   
  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" />   
</div>   
<div class="box3">   
  <img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_sdfsdfs123.jpg" alt="" />   
</div>

css如下:

.box1,.box2,.box3{   
  width:120px;   
  float:left;   
  margin-right:180px;   
}   
img{   
  width:100%;   
}   
.box1 img{   
  -webkit-box-reflect:right;   
  box-reflect:right;   
}   
.box2 img,.box3 img{   
  -webkit-box-reflect: above;   
  box-reflect:above;   
}   
.box3{   
  padding-top:200px;   
}

效果图如下:

用CSS3的box-reflect来制作倒影效果

在这里有一个疑问,box2和box3中的图片都设置了box-reflect:above,都是在顶部生成投影,为什么box2看不到效果呢?原因就是我给box3设置了padding-top:200px,而box2没有,初步估计是因为没有空间让其显示生成的倒影。

倒影与对象之间的距离

了解了生成倒影的方向后,我们来看第二个属性,还是看例子:

依旧用三张图片,不过样式改变一下:

.box1 img{   
  -webkit-box-reflect:below 30px;   
  box-reflect:below 30px;   
}   
.box2 img{   
  -webkit-box-reflect:below -30px;   
  box-reflect:below -30px;   
}   
.box3 img{   
  -webkit-box-reflect:below 5%;   
  box-reflect:below 5%;   
}

效果图如下:

用CSS3的box-reflect来制作倒影效果

接下来我们学习最后一个属性。

遮罩效果

(1)使用渐变给倒影添加遮罩效果

.box1 img{   
  -webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));   
  box-reflect:below 0 linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));   
}

效果如下:

用CSS3的box-reflect来制作倒影效果

使用背景图给倒影添加遮罩效果

首先我们需要一张五角星的png图片:

用CSS3的box-reflect来制作倒影效果

.box2 img{   
  -webkit-box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);   
  box-reflect:below 0 url(http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);   
}

效果如下:

用CSS3的box-reflect来制作倒影效果

总结

好了,到这里,本文关于CSS3的box-reflect属性的语法和使用已经介绍完了。希望本文的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 #HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 #HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 #HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 #HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 #HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 #HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 #HTML / CSS
You might like
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
js常用代码段整理
2011/11/30 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
Java和Javasciprt的区别
2012/09/02 面试题
施工员岗位职责
2014/03/16 职场文书
春节请假条
2014/04/11 职场文书
初中家长评语和期望
2014/12/26 职场文书
机器人总动员观后感
2015/06/09 职场文书
干部考核工作总结2015
2015/07/24 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书