IT兄弟连 HTML5教程 CSS3属性特效 倒影

 

5f16a58a57bc47108e1c532aebeafd05.jpg

在Web制作中,有些时候需要实现一些倒影的效果。在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率。而CSS新增了Reflections板块,CSS Reflections允许设计倒影,目前,CSS Reflections仅获得webkit引擎的支持,我们只能够在Chrome和Safari浏览器中测试。CSS3的box-reflect属性,使我们可以对图片、文字等进行倒影设计,具体语法:

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

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

 

1.direction

direction定义方向,取值包括above、below、left、right。具体含义如表1:

表1  box-reflect属性的direction参数值取值说明

 

image/20191115/9253074d737746c4ea3fa2f6b6e43460

   

2.offset

offset定义反射偏移的距离,取值包括数值或百分比,其中百分比根据对象的尺寸进行确定,默认为0。用长度值来定义倒影与对象之间的间隔,可以为负值。用百分比来定义倒影与对象之间的间隔,可以为负值。

 

3.mask-box-image

mask-box-image定义遮罩图像,该图像将覆盖投影区域。遮罩图像可以是背景图片,也可以是渐变生成的背景图像。如果省略该值,则默认无遮罩图像。该参数有如下取值可以选择:

(1)none:无遮罩

(2)使用绝对或相对地址指定遮罩图像

(3)使用线性渐变创建遮罩图像

(4)使用径向(放射性)渐变创建遮罩图像

(5)使用重复的线性渐变创建遮罩图像

(6)使用重复的径向(放射性)渐变创建遮罩图像

 

说明

设置或检索对象倒影

对应的脚本特性为boxReflect

 

下面的实例定义一个简单的倒影样式,若我们想要为下面一幅图增加一个在水中的倒影,我们就需要简单的利用CSS3的box-reflect特性添加倒影,原图如下:

image/20191115/4c4afb8edae62687fbb0fd872c803682

经我们使用CSS为其添加box-reflect属性后就形成了这两座山的倒影,效果如下:

image/20191115/5342a0841749fde86712851d613d4c9c

 

该实例的代码如下:

image/20191115/fc18bf5d63a29a45e0bf5b4873601017

 

使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,图片被加上了倒影,如图1所示。

image/20191115/772a5206d7804a5bf23a9af9293086f1

图1  倒影

 

我们在上例倒影基础上继续改进,为倒影设置距离,向下偏移2像素,倒影效果如图2所示:

image/20191115/67a09c57279c1d877b5cea02fda51db0

图2  倒影向下偏移2px

 

修改的CSS代码如下:

image/20191115/d80d8a6d0dc0bdb434965293636801e5

 

接下来继续进行改进,设计css渐变倒影,通过渐变遮罩逐渐盖住下面的倒影,制作出渐隐效果。效果图如图3所示:

 

image/20191115/a92086be86e8131f826faf08fb3e50b2

图3  倒影渐隐效果

 

css代码如下:

image/20191115/56e29f8b64b277fbb37c3aaa18e1ceca

 

另外,我们除了可以为图片我们设计倒影外,网页上的任何对象都可以设计css倒影效果,下面的实例是将文本设计为倒影效果。效果如图1.30所示:

image/20191115/8e3b3a86966569e50f0ee14ae87a0e36

图1.30  文本倒影效果

 

文本倒影的HTML代码如下:

image/20191115/80897cc55513ffe828175d27092bbf73

 

倒影效果不会对其它元素产生影响,不会影响页面布局。当然,页面上的任何元素都可以用CSS3制作成倒影的形式,视频也不例外。

posted on 2019-11-19 09:24  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航