用CSS3的box-reflect来制作倒影效果
我要评论兼容性
既然是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;
}
效果图如下：
在这里有一个疑问，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%;
}
效果图如下：
接下来我们学习最后一个属性。
遮罩效果
（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));
}
效果如下：
使用背景图给倒影添加遮罩效果
首先我们需要一张五角星的png图片：
.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属性的语法和使用已经介绍完了。希望本文的内容对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
- 下面小编就为大家带来一篇5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-15
用CSS3的box-reflect设置文字倒影效果的方法讲解
这篇文章主要介绍了用CSS3的box-reflect设置文字倒影效果的方法讲解,文中举了包括遮罩效果在内的一些基础的例子,需要的朋友可以参考下2016-03-07- CSS3制作文字半透明倒影效果，可以使用box-reflect以及transform属性的scaleY方式，下面是具体的实现代码，需要的朋友可以参考下2014-08-08
个小demo是HTML5&CSS3实现的带倒影的3D图片走廊，主要用到了CSS3里的渐变和转换2012-08-22- 这篇文章给大家分享了如何利用CSS3把图片变成灰色模式的效果，实现起来很简单，有需要的朋友们可以参考借鉴。2016-09-06
CSS3实现圆形图片鼠标悬停图片旋转放大特效源码是一款采用CSS3结合图片实现的鼠标悬停到图标上面旋转放大展示效果。本段代码适应于所有网页使用，有需要的朋友可以直接下载2016-08-30- 图片轮播效果在各大网站都能用到，本文给大家分享通过纯css3制作轮播效果图的思路，感兴趣的朋友一起看看吧2016-08-25
polaroid-gallery是一款效果非常酷的纯js和CSS3分散式宝丽来图片画廊插件。所有图片被分散在屏幕的不同地方，并旋转不同的角度2016-08-09
本特效是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特效的代码，通过CSS3 transitions和transform属性实现2016-08-04
这是一款基于纯css3实现的鼠标滑过图片左右3d翻转效果源码。鼠标滑过图片可见图片呈现出翻转的效果，该3d翻转效果由纯css3实现，不含任何js元素2016-07-25
最新评论