各浏览器的CSS倒影效果

firefox、chrome和IE9 都支持CSS3新添的transform属性，所以实现倒影效果非常简单。从下面的代码看到，各家浏览器对transform的实现有点不同
     
 -webkit-transform: scaleY(-1);     /* webkit内核浏览器的实现，例如safari */
 -moz-transform: scaleY(-1);     /* firefox 的实现 */
 -ms-transform: scaleY(-1);     /* IE 的实现 */
 -o-transform: scaleY(-1);     /* Opera的实现 */
    <div class="wrap">  
         <div class="image"><img src="1.jpg" /></div>  
         <div class="down">  
              <div class="reflection"></div>  
              <div class="overlay"></div>  
         </div>  
    </div>  
    body{background:#000;color:#f00}  
    .wrap{position:relative;}  
    .image{margin-bottom:3px;}  
    .down{position: relative;}  
    .reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;  
         -webkit-transform: scaleY(-1);  
         -moz-transform: scaleY(-1);  
         -ms-transform: scaleY(-1);  
         -o-transform: scaleY(-1);  
         transform: scaleY(-1);  
         opacity:0.5;       
         filter:alpha(opacity='50');  
         }  
    .overlay{position: relative;width:421px;height:180px;bottom:149px;  
         background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);  
         background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);  
         background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));  
         filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);  
    }

还可以用css3 box-reflect

 

    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>-webkit-box-reflect</title>
        <style>
        body,h2 {margin:0;padding:0;}
        h2 {-webkit-box-reflect: below 1px -webkit-gradient(linear,0 20%,0 100%,from(transparent),color-stop(0, transparent),to(#000));}
        h1 {-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent,transparent 20%,rgba(255,255,255,.3));}       
    </style>
      </head>
      <body>
       <h2>这一段文字有倒影</h2>

       <h1>这二段文字有倒影</h1>
      </body>
    </html>

 

 

 
posted @ 2015-12-01 15:34  fenglie  阅读(393)  评论(0)    收藏  举报
版权所有，转载声明