软件人生风雨十年，仙剑一过去也有十年有余了，和胡歌认识那么久，今日喜闻好友胡歌生宝宝的消息，惊喜之余用css3为胡歌的宝宝做了动画照片墙的模板效果。
目录
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>
7. 最后
最后再次恭喜胡歌，他给我们带来了这么多优秀的作品，为他感到高兴，希望小宝宝可以快快乐乐成长。
转载：https://blog.csdn.net/xingyu_qie/article/details/128819150