纯CSS3制作多彩动态照片墙

动态照片墙相对于普通的照片墙，在展示效果上也更加好，照片墙展示的是生活的回忆和成长的记忆。

网页代码

<div class="box" id="box">
   <img src="image/1.jpg" width="600" height="450">
   <img src="image/2.jpg" width="600" height="450">
   <img src="image/3.jpg" width="600" height="450">
   <img src="image/4.jpg" width="600" height="450">
   <img src="image/5.jpg" width="600" height="450">
   <img src="image/6.jpg" width="600" height="450">
   <img src="image/7.jpg" width="600" height="450">
   <img src="image/8.jpg" width="600" height="450">
  <img src="image/9.jpg" width="600" height="450">
   <img src="image/10.jpg" width="600" height="450">

</div>

CSS代码

    .box{
        width:800px;
        height:400px;
        margin:10px auto;
        padding:60px;
        background:#ccc;
        position:relative;
        }
    .box img{
        width:200px;
        height:140px;
        border:1px; solid #ddd;
        padding:10px;
        position:absolute;
        background:#fff;
        z-index:1;
        -webkit-transition:all 0.6s ease-in-out;
        -moz-transition:all 0.6s ease-in-out;
        -o-transition:all 0.6s ease-in-out;
        transition:all 0.6s ease-in-out;
        }
    #box img:hover{
        z-index:2;
        box-shadow:5px 5px 5px #ddd;
        -webkit-transform:rotate(0deg) scale(1.5);
        -moz-transform:rotate(0deg) scale(1.5);
        -o-transform:rotate(0deg) scale(1.5);
        transform:rotate(0deg) scale(1.5);
        }
    .box img:nth-child(1){
        top:60px;
        left:50px;
        transform:rotate(-20deg);
        }
    .box img:nth-child(2){
        top:50px;
        left:220px;
        transform:rotate(25deg);
        }
    .box img:nth-child(3){
        top:50px;
        left:420px;
        transform:rotate(-18deg);
        }
    .box img:nth-child(4){
        top:50px;
        left:590px;
        transform:rotate(20deg);
        }
    .box img:nth-child(5){
        top:230px;
        left:60px;
        transform:rotate(24deg);
        }
    .box img:nth-child(6){
        top:200px;
        left:220px;
        transform:rotate(-30deg);
        }
    .box img:nth-child(7){
        top:200px;
        left:420px;
        transform:rotate(-40deg);
        }
    .box img:nth-child(8){
        top:220px;
        left:600px;
        transform:rotate(-15deg);
        }
    .box img:nth-child(9){
        top:320px;
        left:260px;
        transform:rotate(15deg);
        }
    .box img:nth-child(10){
        top:320px;
        left:480px;
        transform:rotate(20deg);
        }

由于仅供用于学习和测试使用...

未经允许不得转载：创之梦博客 » 纯CSS3制作多彩动态照片墙