Css3案例

<!DOCTYPE html>

<html>

<meta charset=utf-8>

    <head>

        <style> 

            body{

                backgound:#f9f9f9;

            }

            .img{

                position: absolute;

                width: 300px;

                height: 200px;

                border:10px solid #ccc;

                overflow:hidden;



            }

            .img img{

                width:100%;

                height:100%;

                transition:all .3s ease;

            }

            .img:hover img{

                -webkit-transform:scale(1.5);

            }

            .back{

                z-index:9999;

                background-color: rgba(219,127,8, 0);

                position: absolute;

                top: 0;

                left: 0;

                height:100%;

                text-align: center;

                color: #000;

                -webkit-transition:all .5s  ease;

                

            }

            .back h2{

                text-align:center;

                color:#000;

                -webkit-transition:all .5s  ease;

                background-color: rgba(0,0,0, 0.5);

                height:30px;

                position: relative;

                top: -55px;

            }

            .back p{

                position: relative;

                bottom: -130px;

                -webkit-transition:all .5s  ease;

            }

            

            

            .back:hover h2{

                text-align:center;

                color:#fff;

                top:0;

            }



            .back:hover p{

                text-align:center;

                color:#fff;

                bottom:0;

            }



            

            .info{

                background-color: rgba(0,0,0,.7);

                padding:5px;

                color:#fff;

                text-decoration: none;

                -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

               filter: alpha(opacity=0);

               opacity: 0;

               

               -webkit-transition: all 0.2s ease-in-out;

               -moz-transition: all 0.2s ease-in-out;

               -o-transition: all 0.2s ease-in-out;

               -ms-transition: all 0.2s ease-in-out;

               transition: all 0.2s ease-in-out;

            }

            .back:hover a{

                -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

               filter: alpha(opacity=100);

               opacity: 1;

               -webkit-transform: translateY(0px);

               -moz-transform: translateY(0px);

               -o-transform: translateY(0px);

               -ms-transform: translateY(0px);

               transform: translateY(0px);

            }

            

            .back:hover{

                background-color: rgba(219,127,8,.7);

            }



        </style>

    </head>

<body>



<div class="img">



    <img src="1.jpg">

    <div class="back">

        <h2>Hover Style #1</h2>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>

        <a href="#" class="info">Read More</a>

    </div>

    

</div>









</body>

</html>

Css3案例

Css3案例

 

<!DOCTYPE html>

<html>

<meta charset=utf-8>

    <head>

        <style> 

            body{

                backgound:#f9f9f9;

            }

            .view {

                width: 300px;

                height: 200px;

                margin: 10px;

                float: left;

                border: 10px solid #fff;

                overflow: hidden;

                position: relative;

                text-align: center;

                -webkit-box-shadow: 2px 1px 5px #ccc;

                -moz-box-shadow: 2px 1px 5px #ccc;

                box-shadow: 2px 1px 5px #ccc;

                cursor: default;

                background: #fff;

            }

            

            .mask{

                width: 360px;

                height: 470px;

                background: rgba(115,146,184, 0.7);

                position: absolute;

                top: 0px;

                left: 0px;

                -webkit-transition: all 0.2s ease-in-out;

                -moz-transition: all 0.2s ease-in-out;

                -o-transition: all 0.2s ease-in-out;

                -ms-transition: all 0.2s ease-in-out;

                transition: all 0.2s ease-in-out;

                transform: translate(265px, 145px) rotate(45deg);



            }

            

            .view:hover .mask{

                

                left: -249px;

                top: -313px;

                

            }

            .content{

                position:absolute;

                top:0;

                left:0;

                width:100%;

                height:100%;

                z-index:9999;

            }

            .content h2{

                position: absolute;

                top: -80px;

                width: 100%;

                right: -310px;

                color:#fff;

                transition: all 0.2s ease-in-out;

            }

            

            .content:hover h2{

                top:0;

                left:0;

            }

            .content p{

                position: absolute;

                width: 100%;

                bottom: -100px;

                color:#fff;

                right: -319px;

                transition: all 0.5s ease-in-out;

            }





            .content:hover p{

                bottom:0;

                left:0;

            }

            .info{

                text-decoration: none;

                color:#fff;

                background: rgba(11, 11, 11, 0.8);

                padding:10px;

                position: relative;

                top: -40px;

                transition: all 0.9s ease-in-out;

            }

            

            .vide:hover a{

                top:60px;

            

            }

            

        </style>

    </head>

<body>



<div class="view view-second">

    <img src="1.jpg">

    

    <div class="mask"></div>

    

    <div class="content vide">

        <h2>Hover Style #2</h2>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>

        <a href="#" class="info">Read More</a>

    </div>

    

</div>









</body>

</html>

Css3案例

你可能感兴趣的:(css3)