使用CSS3制作倒影——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
使用CSS3制作倒影

发布作者:萧强   发布时间:2014-05-20   阅读次数:7959

在Web制作中,有些时候需要实现一些倒影的效果。比如说,你看到一个美女,你想从另一个角度来看这个MM的风姿,如下图:

使用CSS3制作倒影

在早前要实现这样的效果我们都必须借助于类似于Photoshop这样的制作图软件来实现,然后通过引入一张image。那么除了图片,我们有没有别的方法能实现呢?值得庆幸的是,到目前为之,CSS3有一个属性box-reflect可以实现。那么今天我们要给大家介绍的就是这个属性的应用。

浏览器的兼容性

box-reflect属性虽然能帮助我们实现上图的效果,但到目前为止,浏览器对其支持性并不是非常的完美。在一些浏览器下还是无法直接通过这个属性来达到我们要的效果。那么到目前为止有哪些浏览器能支持这个属性呢?我们来看下面的表格:

虽然目前仅在Chrome、Safari和Opera浏览器下支持,但这并不影响我们来学习这个属性的应用,有必无患吧。

box-reflect语法

要了解box-reflect属性如何使用,我们得先知道其语法怎么,这样才能更好的清楚使用这个属性。其基本语法如下:

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

由于此属性并不是W3C标准属性,在具体使用之时,还是需要添加浏览器的私有属性,根据浏览器的兼容性,使用box-reflect时需要添加-webkit和前缀:

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

可惜的是在Firefox下并不支持这个属性,不过值得庆幸的是,在Firefox下可以通过-moz-element()来模拟实现,稍后我会详细介绍。

box-reflect取值说明

从blox-reflect语法中可以得知,其主要包括以下几个属性值:

  • none:此值为box-reflect默认值,表示无倒影效果;
  • <direction>:此值表示box-reflect生成倒影的方向,主要包括以下几个值:
    • above:表示生成的倒影在对象(原图)的上方;
    • below:表示生成的倒影在对象(原图)的下方;
    • left:表示生成的倒影在对象(原图)的左侧;
    • right:表示生成的倒影在对象(原图)的右侧;
  • <offset>:用来设置生成倒影与对象(原图)之间的间距,其取值可以是固定的像素值,也可以是百分比值,如:
    • :使用长度值来设置生成的倒影与原图之间的间距,只要是CSS中的长度单位都可以,此值可以使用负值;
    • :使用百分比来设置生成的倒影与原图之间的间距,此值也可以使用负值
  • <mask-box-image>:用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像。

仅从理论上介绍,似乎不太生动,接下来,我们以实例来介绍。

倒影的方向

box-reflect倒影方向跟我们CSS中的margin和padding类似,包括上、右、下、和左四个方向,每个方向都可以使用关键词来定义。下面我们能过简单的示例向大家演示这样的效果:

倒影在对象的上方

假设我们需要给一张图片做倒影效果,其结构其实非常简单:


<div class="box-reflect"><img src="http://imgt9.bdstatic.com/it/u=2,687775882&fm=19&gp=0.jpg" alt="" height="200"/></div>
根据前面的语法介绍,要让倒影在对象的上方,我们只需要给box-reflect属性取值为above即可:



.box-reflect img {
  -wekbit-box-reflect: above;
  box-reflect: above;
}
其效果如下:


使用CSS3制作倒影




特别提示:在此示例中,我们为倒影提供了一个空白区,如果没有提供空白区,将没有任何效果显示。在上面的示例基础上做一下修改,我把.box-reflect的margin做一下修改:

.box-reflect {
  margin: 0 auto 210px;
  width: 200px;
}
.box-reflect img {
  -wekbit-box-reflect: above;
  box-reflect: above;
}

你将会看到一个非常奇怪的效果,就是倒影没有了:

使用CSS3制作倒影

DEMO

如果你要问我为什么?说真的,我也不清楚,我只能认为:如果倒影在对像上方,如果没有预留一定的空间,将会示为无法看见。我们来尝试调整别的元素,造成有空间的假像,比如,给body一个padding-top值:

使用CSS3制作倒影

从上图的动画演示效果来看,box-reflect属性取值为above时,对象的倒影已生成,只不过无显示区域,用户无法直视效果,一但有空间放置生成的倒影,效果就出来了。

倒影在对像右侧

在文章最开始,我们看到一张示意图,有两个MM前靠背在那,其实有了box-reflect这一切不再是问题,只需要将box-reflect属性值设置为right即可:

.box-reflect img {
  -wekbit-box-reflect: right;
  box-reflect: right;
}

效果如下所示:

使用CSS3制作倒影

DEMO

同样的道理,当对象(原图)右侧没有足够多的空间预留给生成的倒影放置的时候,也将不会显示出来。

倒影在对象底部

当box-reflect取值为above时,生成的倒影在对象上方,其实当其取值为above反义词below时,对象生成的倒影将会在对像的底部。如:

.box-reflect img {
  -wekbit-box-reflect: below;
  box-reflect: below;
}

效果如下:

使用CSS3制作倒影

DEMO

和前面一样,当box-reflect取值为below时,也要在对象底部预留一定的空间,不然生成的倒影也无法看到。

倒影在对象左侧

除了让生成的倒影在对象的上方、右侧和底部之外,还可以让生成的倒影在对像的左侧。如果你想让对像生成的倒影在左侧,你只需要将box-reflect的值设置为left。

.box-reflect img {
  -wekbit-box-reflect: left;
  box-reflect: left;
}

效果如下:

使用CSS3制作倒影

DEMO

同样的道理,需要在对像的左侧给生成的倒影预留一定的空间。否则将无法看到生成出来的倒影。

倒影与对象之间的间距

了解完生成倒影的方向之后,我们一起来看第二个属性值<offset>。有时候大家可能会有这样的需求,我虽然将倒影生成出来了,但我想让生成的倒影与对象(原图)之间有一定的间距。那么这个时候我们就需要使用到box-reflect属性中的第二个属性值<offset>。

随便拿一个示例来说做演示,假设对象生成的倒影在底部,而且需要让生成的倒影离自身有一个20px的间距,此时我们只需要这样做:

.box-reflect-offset img {
  -wekbit-box-reflect: below 20px;
  box-reflect: below 20px;
}

效果如下:

使用CSS3制作倒影

DEMO

在属性说明一节中也说过,<offset>取值可以是长度值(px、em或rem)也可以是百分比(%)值。而且还可以取负值,我们不仿来看一个演示图:

使用CSS3制作倒影

给倒影添加遮罩效果

除了可以给倒影设置方向和间距之外,其还具备第三个属性<mask-box-image>。也就是给生成的倒影添加遮罩效果。给生成的倒影添加遮罩效果,我们可以通过两种方式第一种是渐变生成的背景图像,第二种是外部的背景图像。接下来我们简单的来看看这两种方式。

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

我们先来看渐变生成的背景应用在生成的倒影中将会是什么样的效果。至于CSS3的渐变如何使用?这里就不花篇幅进行介绍了。如果你从未接触过CSS3的渐变,个人强烈建议您先阅读一下下面的几篇教程:

有关于CSS3渐变其他教程可以点击这里此链接也提供了一些相关的案例介绍。

我们回到教程中来,首先按照前面介绍的方法,给对像生成一个向下的倒影,并且给box-reflect加上<mask-box-image>属性值(记住是渐变生成的):

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

效果如下:

使用CSS3制作倒影

DEMO

可惜的是,只能使用线性渐变给生成的倒影添加遮罩效果,而径向渐变到目前还无任何效果。另外有一点特别需要提醒大家,给生成的倒影添加遮罩效果的时候,如果没有设置显式的间距<offset>将会让box-reflect失效。也就是说,当box-reflect属性中的<mask-box-image>属性值出现时,必须显式的设置<offset>值,如果不需要间距,将其设置为0。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/css3-box-reflect.html

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

CSS3直通车

热点文章

新闻资讯

标签云

友情赞助