CSS网页特效--倒影

示例如下图所示：

页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒影示例</title>
<style type="text/css">
/* ==============================================
                    Theme White 
   ============================================== */
#gallery-white {
    width:490px;
    margin:50px auto 0px;
    position:relative;
    overflow:hidden;
    background:#FFF;
    padding:0px 50px;
    border:1px solid #ccc;
}

#gallery-white h1 {
    text-align:center;
    font:20px Arial, Helvetica, sans-serif;
    margin-bottom:50px;
}

#gallery-white h1 span {
    font-size:12px; 
}

#gallery-white .image-block {
    width:78px;
    margin:0px 10px;
    float:left;
}

#gallery-white .reflection {
    position:relative;
}

#gallery-white .reflection img {  
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
               filter: flipv;
    opacity:0.20;
    filter: alpha(opacity='20'); 
}

#gallery-white .overlay {position:absolute; top:0px; left:0px; width:78px; height:120px; 
    background-image: -moz-linear-gradient(center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
    background-image:   -o-linear-gradient(rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
    background-image:     -webkit-gradient(linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#ffffff);
}
#gallery-white .vline {
    position:absolute; 
    bottom:70px; 
    border-bottom:2px solid #666;
    width:490px;
}

/* ==============================================
            Common styling for link 
   ============================================== */
p {text-align:center; font-size:18px; font-family:Arial, Helvetica, sans-serif; padding-top:20px;}
a {color:#333; text-decoration:none;}
a:hover {text-decoration:underline;}
</style>
</head>

<body>
<div id="gallery-white">
	<h1>CSS3 Reflection Demo <span>(Theme White)</span></h1>
    
    <div class="image-block">
        <img src="images/book1.jpg" alt="">
        <div class="reflection">
            <img src="images/book1.jpg" alt="">
            <div class="overlay"></div>
        </div>
    </div>
    
    <div class="image-block">
        <img src="images/book2.jpg" alt="">
        <div class="reflection">
            <img src="images/book2.jpg" alt="">
            <div class="overlay"></div>
        </div>
    </div>
    
    <div class="image-block">
        <img src="images/book3.jpg" alt="">
        <div class="reflection">
            <img src="images/book3.jpg" alt="">
            <div class="overlay"></div>
        </div>
    </div>
    
    <div class="image-block">
        <img src="images/book4.jpg" alt="">
        <div class="reflection">
            <img src="images/book4.jpg" alt="">
            <div class="overlay"></div>
        </div>
    </div>
    
    <div class="image-block">
        <img src="images/book5.jpg" alt="">
        <div class="reflection">
            <img src="images/book5.jpg" alt="">
            <div class="overlay"></div>
        </div>
    </div>
    
    <div class="vline"></div>
</div>
</body>
</html>

　　

posted @ 2012-04-20 11:02  Mygirl  阅读(984)  评论(0)    收藏  举报