CSS网页特效--倒影

示例如下图所示:

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>

  

你可能感兴趣的:(css)