温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用css3的box-reflect设计倒影效果

发布时间:2022-02-28 14:59:31 来源:亿速云 阅读:92 作者:小新 栏目:web开发

这篇文章主要为大家展示了“怎么用css3的box-reflect设计倒影效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么用css3的box-reflect设计倒影效果”这篇文章吧。

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

}

h2 { text-align: center; }

</style>

</head>

<body>

<div>

    <h2>《雨巷》--- 戴望舒</h2>

    <p>撑着油纸伞,独自<br />

        彷徨在悠长、悠长<br />

        又寂寥的雨巷<br />

        我希望逢着<br />

        一个丁香一样地<br />

        结着愁怨的姑娘 </p>

</div>

<img src="images/bg2.jpg" />

</body>

</html>

以上是“怎么用css3的box-reflect设计倒影效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI