胡歌墙纸主题(v100)下载（我用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>7. 最后
最后再次恭喜胡歌 ，他给我们带来了这么多优秀的作品 ，为他感到高兴 ，希望小宝宝可以快快乐乐成长 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！