这篇文章主要为大家详细介绍了CSS3制作漂亮的照片墙的具体步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享利用CSS3动画制作照片墙的详细步骤，供大家参考，具体内容如下

第一种实现效果：

Html代码如下:

照片墙制作

CSS代码如下:

* {margin:0; padding:0;}

body { background-color: #eee; padding-top: 50px;}

h2 { text-align: center;}

.container { position: relative; width:1000px; height:700px; margin:0px auto; }

img { position: absolute; top:50px; left:100px; cursor: pointer;

padding:10px 10px 25px; background-color: #fff; border:1px solid #ddd;

transition:0.5s; box-shadow: 3px 3px 3px #ccc;

}

.img1 { left:40px; top:20px; transform:rotate(30deg); z-index: 1;}

.img2 { left:156px; top:156px; transform:rotate(-30deg); z-index: 1;}

.img3 { left:381px; top:60px; transform:rotate(30deg); z-index: 1;}

.img4 { left:458px; top:256px; transform:rotate(30deg); z-index: 1;}

.img5 { left:684px; top:110px; transform:rotate(-40deg); z-index: 1;}

img:hover { transform:rotate(0deg); transform:scale(1.5); box-shadow: 6px 6px 6px #656565; z-index: 2;}

效果图:

第二种实现效果：

第一部分：HTML

这里我们首先放十张图片在页面上面。(有什么靓照尽管上来哦！)

第二部分：CSS3

这一部分就是我们这节的重点了，如上图所示照片的位置各不相同，我们肯定会用到CSS3一下的知识点：

CSS3的旋转 rotate

CSS3的缩放 scale

CSS3的阴影 box-shadow

没错就是这些功能我们就可以做一个漂亮的照片墙了。来看看我们的代码吧，这里只展示部分代码了聪明的小伙伴肯定知道怎么做的！body{

background: url(../img/bg1.jpg) no-repeat top center fixed;

background-size: 100% auto;

}

.content{

width: 900px;

height: 1000px;

overflow: hidden;

margin: 100px auto;

position: relative;

}

img{

z-index: 1;

width: 20%;

height: auto;

position: absolute;

padding: 10px 10px 15px 10px;

background: #ffffff;

border: 1px solid #CCCCCC;

/* 动画的时间 */

-moz-transition: 0.5s;

-webkit-transition: 0.5s;

transition: 0.5s;

}

img:hover{

z-index: 2;

transform: scale(1.5);

-moz-transform: scale(1.5) ;

-webkit-transform: scale(1.5) ;

box-shadow: -10px 10px 20px #000000;

-moz-box-shadow: -10px 10px 20px #000000;

-webkit-box-shadow: -10px 10px 20px #000000;

}

.pic1{

left: 100px;

top: 50px;

-webkit-transform: rotate(20deg);

-moz-transform: rotate(20deg);

transform: rotate(20deg);

}

.pic2{

left: 280px;

top: 60px;

-webkit-transform: rotate(-10deg);

-moz-transform: rotate(-10deg);

transform: rotate(-10deg);

}

/* 下面的代码大同小异就不依依展示了 */

就是这么简单的代码就可以实现上图所示的效果了。小伙伴们有兴趣的自己动手尝试一下把自己的靓照放上去看看。

PS： CSS3还可以写出更多的精彩绚丽效果，小伙伴有兴趣可以深入的研究一下！

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：