软件人生风雨十年,仙剑一过去也有十年有余了,和胡歌认识那么久,今日喜闻好友胡歌生宝宝的消息,惊喜之余用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. 最后
最后再次恭喜胡歌,他给我们带来了这么多优秀的作品,为他感到高兴,希望小宝宝可以快快乐乐成长。