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

最新推荐文章于 2024-05-09 11:02:42 发布

kevin_cyj

最新推荐文章于 2024-05-09 11:02:42 发布

阅读量4.8k

点赞数 1

文章标签： HTML5 css css3

HTML5 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

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

摘要: 说起倒影效果，在传统网页中，我们只能使用photoshop进行事先将倒影设计好，然后导入到网页中，这样不但耗费资源，也阻碍了开发的效率。而css3新增了Reflections板块，css Reflections允许css设计倒影。目前， cssRe ...

id="iframeu1728796_0" src="http://pos.baidu.com/wcqm?rdid=1728796&dc=2&di=u1728796&dri=0&dis=0&dai=1&ps=364x190&dcb=BAIDU_SSP_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1465231238790&ti=%E4%BD%BF%E7%94%A8css3%20box-reflect%E8%AE%BE%E8%AE%A1%E5%80%92%E5%BD%B1%E6%95%88%E6%9E%9C-HTML5%E6%95%99%E7%A8%8B-HTML5%E6%98%9F%E7%A9%BA&ari=1&dbv=2&drs=1&pcs=1349x614&pss=1349x718&cfv=0&cpl=14&chi=1&cce=true&cec=GBK&tlm=1465231238&ltu=http%3A%2F%2Fwww.html5star.com%2Farticle-135-1.html&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DtkZqf5nTTIyLkCuViX7Im5_m-EXg3bowVtrUfJFMYtAJThUGsiwdFjeLbq9bk3Phdhs9XSPsFQxp3esFsNsHGa%26wd%3D%26eqid%3Df76d71fd00126a66000000055755a532&ecd=1&psr=1366x768&par=1366x728&pis=-1x-1&ccd=24&cja=false&cmi=23&col=zh-CN&cdo=-1&tcn=1465231239&qn=7034639714f2ae25&tt=1465231238749.46.148.151" width="200" height="200" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="word-wrap: break-word; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">

说起倒影效果，在传统网页中，我们只能使用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>

kevin_cyj

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用css3 box-reflect设计倒影效果

使用css3 box-reflect设计倒影效果摘要: 说起倒影效果，在传统网页中，我们只能使用photoshop进行事先将倒影设计好，然后导入到网页中，这样不但耗费资源，也阻碍了开发的效率。而css3新增了Reflections板块，css Reflections允许css设计倒影。目前， cssRe ...
复制链接

扫一扫

专栏目录