使用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<u=http%3A%2F%2Fwww.html5star.com%2Farticle-135-1.html<r=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;">
<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>效果图: <!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> |