首页 > 代码库 > css3 倒影

css3 倒影

2024-08-15 00:13:02   224人阅读

  • 说起倒影效果，在传统网页中，我们只能使用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=http://www.mamicode.com/"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=http://www.mamicode.com/"images/bg2.jpg" /></body></html>

css3 倒影


联系
我们