请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 CSS3 查看内容

使用css3 box-reflect设计倒影效果

2013-11-18 14:22| 发布者: admin| 查看: 5848| 评论: 0

摘要: 说起倒影效果,在传统网页中,我们只能使用photoshop进行事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发的效率。而css3新增了Reflections板块,css Reflections允许css设计倒影。目前, cssRe ...
  • 说起倒影效果,在传统网页中,我们只能使用photoshop进行事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发的效率。而
    css3新增了Reflections板块,css  Reflections允许css设计倒影。 
    目前, css  Reflections仅获得webkit引擎的支持,我们只能够在Chrome和Safari浏览器中测试,相信以后会普及的。
    css3的box-reflect属性,可以使我们进行图片、文字等的倒影设计,具体语法:

    语法:
    box-reflect:包括3个值。
    1. direction 定义方向,取值包括 above 、 below 、 left 、 right。
    above:
    指定倒影在对象的上边
    below:
    指定倒影在对象的下边
    left:
    指定倒影在对象的左边
    right:
    指定倒影在对象的右边

    2. offset定义反射偏移的距离,取值包括数值或百分比,其中百分比根据对象的尺寸进行确定。默认为0。
    用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。
    3. mask-box-image定义遮罩图像,该图像将覆盖投影区域。如果省略该参数值,则默认为无遮罩图像。
    取值:
    none:无遮罩图像:
    使用绝对或相对地址指定遮罩图像。
    使用线性渐变创建遮罩图像。
    使用径向(放射性)渐变创建遮罩图像。
    使用重复的线性渐变创建背遮罩像。
    使用重复的径向(放射性)渐变创建遮罩图像。
    说明:
    设置或检索对象倒影。
    对应的脚本特性为boxReflect。

    当对象源发生变化时,投影能够自动更新,当鼠标经过对象时,也能够在投影中看到鼠标效果,如果该属性应用到video标签上,视频也会以投影效果进行播放。而且投影的规模和反射偏移不影响页面的布局。

    下面的示例定义一个简单的倒影样式,效果图如下:



    css代码如下:

<style type="text/css">
img {
    height:250px;
    border:1px solid red;
    -webkit-box-reflect:below;
}
</style>
html代码如下:
<body>
<img src="images/bg1.jpg"  />
</body>

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

改动的css代码:
<style type="text/css">
img {
    height:250px;
    -webkit-box-reflect:below 10px ;
}
</style>

接下来继续进行改进,设计css渐变倒影,通过渐变遮罩逐渐盖住下面的倒影,制作出渐隐效果。
css代码如下:
<style type="text/css">
img {
    height:250px;
    -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
</style>
效果图:

 

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

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Reflections文字倒影效果</title>
<style type="text/css">
img {
    height: 200px;
    position: absolute;
    right: 0;
    bottom: 0;
}
div {
    border: 1px solid #666;
    color: #666;
    -webkit-box-reflect: below 5px;
}
h1 { text-align: center; }
</style>
</head>

<body>
<div>
    <h1>《雨巷》--- 戴望舒</h1>
    <p>撑着油纸伞,独自<br />
        彷徨在悠长、悠长<br />
        又寂寥的雨巷<br />
        我希望逢着<br />
        一个丁香一样地<br />
        结着愁怨的姑娘 </p>
</div>
<img src="images/bg2.jpg" />
</body>
</html>

文本倒影演示

不知道大家有没有发现,在给文字制作倒影的例子中,多加入了一张图片,目的是为了说明,倒影效果不会对其它元素产生影响,不会影响页面布局。

当然,页面上的任何元素都可以用css3制作成倒影的形式,视频也不例外,请猛击下面的按钮查看。

视频倒影演示

到此,css3 Reflections板块的倒影属性box-reflect已经介绍的差不多了,敬请期待后面的更多案例。

本文出自HTML5星空,转载请注明链接。




1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-9-25 08:45 , Processed in 0.076102 second(s), 28 queries .

返回顶部