CSS3 简易照片墙

代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>照片墙</title>
        <style>
            *{
                background: #eee;
                margin: 0px;
                padding: 0px;
                position:absolute;
            }
            .qiang{
                
                width: 960px;
                height: 450px;
            }
            .qiang img{
                width: 200px;
                margin: 20px 20px 30px;
                padding: 15px 15px 30px;
                border: solid 1px #fff;
                /*边框阴影*/
                box-shadow: 5px 5px 8px rgba(50,50,50,0.4);
                background-color: #fff;
                /*缩放动画效果*/
                transition: all 0.5s ease-in-out;
                -webkit-transition: all 0.5s ease-in-out;
            }
            .qiang img:hover{
                transform:rotate(0deg);
                /*角度调整为零，放大1.5倍;*/
                -webkit-transform:rotate(0deg) scale(1.5);
                z-index: 99;
            }
            
            
            .pic1{
                transform: rotate(-5deg);
                -webkit-transform: rotate(-5deg);
            }
            .pic2{
                left: 240px;
                -webkit-transform: rotate(7deg);
            }
            .pic3{
                left: 500px;
                -webkit-transform: rotate(-11deg);
            }
            .pic4{
                left: 750px;
                -webkit-transform: rotate(-13deg);
            }
            .pic5{
                top: 300px;
                transform: rotate(-5deg);
                -webkit-transform: rotate(-6deg);
            }
            .pic6{
                left: 240px;
                top: 300px;
                -webkit-transform: rotate(9deg);
            }
            .pic7{
                left: 500px;
                top: 300px;
                -webkit-transform: rotate(-4deg);
            }
            .pic8{
                left: 750px;
                top: 300px;
                -webkit-transform: rotate(-6deg);
            }
            
        </style>
    </head>
    <body>
        <div class="qiang">
            <img class="pic1" src="img/1.jpg" />
            <img class="pic2" src="img/2.jpg" />
            <img class="pic3" src="img/3.jpg" />
            <img class="pic4" src="img/4.jpg" />
            <img class="pic5" src="img/5.jpg" />
            <img class="pic6" src="img/6.jpg" />
            <img class="pic7" src="img/7.jpg" />
            <img class="pic8" src="img/8.jpg" />
        </div>
    </body>
</html>
CSS3 简易照片墙

相关推荐
