纯css3实现图片倒影效果

纯css3实现的图片倒影效果。简直美爆了有木有?

paste image

这里只引用了上面的一张图片,下面的倒影则是由纯css实现的。这里主要用到的是box-reflect属性,但由于兼容性问题,配合使用了-moz-element()。

一、box-reflect

box-reflect属性能够轻松帮助我们实现倒影效果,但是它只支持chrome, safari和opera等Webkit内核的浏览器,具体兼容性如下。

paste image

它的基本语法是:

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

属性说明:

none:此值为box-reflect默认值,表示无倒影效果。

<direction>:此值表示box-reflect生成倒影的方向,主要包括above, below, left, right。分别代表四个不同方向。

<offset>:用来设置生成倒影与对象(原图)之间的间距,其取值可以是固定的像素值,也可以是百分比值。

<mask-box-image>:用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像。

附上效果图一张:

paste image

前端技巧:纯css3实现图片倒影效果可以使用渐变给倒影添加遮罩效果,比如刚开始的那种效果图,实现代码如下:

1
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

二、火狐中的替代方案

火狐中可以使用-moz-element()来生成倒影。

具体实现方式是先将图片放在id为img的盒子里,下面加一个存放倒影的div,html代码如下:

1
2
<div id="img"><img src="moon.jpg"></div>
<div class="daoying"></div>

css代码如下:

1
2
3
4
5
6
7
8
9
10
11
.daoying{
width: 690px; height: 409px;
background: -moz-element(#img);
transform: scaleY(-1);
}
.daoying:before {
content: '';
display: block;
height: 100%;
background-image: linear-gradient(to top, hsla(0,0%,100%,0), white);
}

三、总结

box-reflect使用的时候要加-webkit前缀,-moz-element()也只有火狐能识别出来,所以二者结合互不影响,完美实现图片倒影效果。

看完教程,赶快去亲自试验一下吧。

最后更新:

原始链接: http://wangzc.cc/blog/css-box-reflect/