我用css3为好友胡歌的宝宝做了一个动画照片墙

软件人生风雨十年，仙剑一过去也有十年有余了，和胡歌认识那么久，今日喜闻好友胡歌生宝宝的消息，惊喜之余用css3为胡歌的宝宝做了动画照片墙的模板效果。

1. 实现思路

2. 墙体的实现

3. 选取模板素材，进行图片元素布局

4. css3旋转定位

5. 鼠标上移的放大动画

6. 完整源代码

7. 最后

1. 实现思路

首先通过设置一个div元素，设定宽高，为背景墙；

并且将背景墙的定位设定为relative，以便内部照片的旋转，以及定位；

内部照片可以找一些素材，再通过定位设定为absolute，而且这里要添加css3的旋转属性进行布局；

最后当鼠标上移到每个照片的时候，需要有一个放大的效果，为了更好的展示每一张照片。

2. 墙体的实现

需要设定一个div元素，添加wall的class类属性，并且为了定位内部的照片，定位属性采用position:relative，色值可以设定的喜庆一些，这里设定为一个#ccc的背景效果，代码如下：

// css部分
.wall {position: relative;width: 800px;height: 400px;background: #CCC;
}<!-- html部分 -->
<div class="wall">
</div>

3. 选取模板素材，进行图片元素布局

可以去网上选取一些宝宝照素材，做模板嘛，大概选取几张就可以了，然后由于需要每张特殊定位，所以给每张图片（每个img元素都添加自己的clsss类），代码如下：

<div class="wall"><img src="./111.png" class="img1" /><img src="./222.png" class="img2" /><img src="./333.png" class="img3" /><img src="./444.png" class="img4" /><img src="./555.png" class="img5" /><img src="./666.png" class="img6" /><img src="./777.png" class="img7" />
</div>

4. css3旋转定位

接下来就是重要环节，给每个照片进行独特的定位，定位包括top left width height的设定，因为照片墙想要做的真实一些，所以会有一定的遮挡效果，而通过position:absolute的设定正好可以达到这个效果，如果你想让某一张显示在最上面，可以通过z-index再次设定，代码如下：

.img1 {position: absolute;top: 20px;left: 60px;width: 110px;height: 86px;transform: rotate(20deg);}.img2 {position: absolute;top: 20px;left: 222px;width: 143px;height: 118px;transform: rotate(-27deg);}.img3 {position: absolute;top: 78px;left: 430px;width: 190px;height: 148px;transform: rotate(58deg);}.img4 {position: absolute;top: 99px;left: 273px;width: 280px;height: 221px;transform: rotate(58deg);}.img5 {position: absolute;top: 174px;left: 73px;width: 237px;height: 210px;transform: rotate(135deg);}.img6 {position: absolute;top: 174px;left: 574px;width: 192px;height: 195px;transform: rotate(225deg);}.img7 {position: absolute;top: 39px;left: 618px;width: 134px;height: 133px;transform: rotate(10deg);}

5. 鼠标上移的放大动画

既然是一种HTML + CSS3的动态照片墙，那么最好是可以有一个放大的效果，其实还有很多效果可以做，比如旋转一下，或者从某个地方淡入淡出一下，做的像个视频那样，这里做的是鼠标上移放大的效果，代码如下：

img:hover {transform: scale(2);
}

6. 完整源代码

上面都是代码片段，为了可以让大家拿到代码就有个很好的效果，可以拿到下面的源代码，直接放到自己的记事本里，再将记事本的txt后缀改为html，再用浏览器打开就可以看效果了。源代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>照片墙</title><style>* {margin: 0;padding: 0;}.wall {position: relative;width: 800px;height: 400px;background: #CCC;}.img1 {position: absolute;top: 20px;left: 60px;width: 110px;height: 86px;transform: rotate(20deg);}.img2 {position: absolute;top: 20px;left: 222px;width: 143px;height: 118px;transform: rotate(-27deg);}.img3 {position: absolute;top: 78px;left: 430px;width: 190px;height: 148px;transform: rotate(58deg);}.img4 {position: absolute;top: 99px;left: 273px;width: 280px;height: 221px;transform: rotate(58deg);}.img5 {position: absolute;top: 174px;left: 73px;width: 237px;height: 210px;transform: rotate(135deg);}.img6 {position: absolute;top: 174px;left: 574px;width: 192px;height: 195px;transform: rotate(225deg);}.img7 {position: absolute;top: 39px;left: 618px;width: 134px;height: 133px;transform: rotate(10deg);}img:hover {transform: scale(2);}</style>
</head>
<body><div class="wall"><img src="./111.png" class="img1" /><img src="./222.png" class="img2" /><img src="./333.png" class="img3" /><img src="./444.png" class="img4" /><img src="./555.png" class="img5" /><img src="./666.png" class="img6" /><img src="./777.png" class="img7" /></div>
</body>