照片墙
嗯嗯嗯，get一个小技能，用css实现照片墙。照片是倾斜的，互相遮挡的，当鼠标移动到照片上时，照片会变正，还会放大，显示在最上面。移走后又会恢复原样。
个人步骤：
先找到几张漂漂亮亮可可爱爱的图片，让他们排排站好，再用transition设置图片的角度，改变大小等（让它看起来是随意摆放的）。然后再使用hover,使鼠标移到上面的时候出现变化。hover中，用transform将图片的旋转角度变为0，它就摆正了。最后给它加上一点细节，给它一个阴影，给它一个transition变化时间，哦哦哦，还要给它加上z-index控制层次关系，使移动到图片上面时，图片会在最上层。等等等等等的细节，其他的我还没想到。
以下是代码和图片，因为不知道怎么把动画效果展示出来，就只有图片了，嗯，就这凑合着看吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>照片墙</title>
<style type="text/css">
.container{
margin:0 auto;
margin-top:100px;
width:1000px;
}
img{
width:150px;
height:150px;
box-shadow:2px 2px 2px;
border:solid 1px #CCCCCC;
transition:all 0.8s ease-in;
-moz-transition:all 0.8s ease-in;
-webkit-transition:all 0.8s ease-in;
z-index:1;
margin-right:-40px;
background:#fff;
}
.pic1{
transform:rotate(20deg) scale(0.8);
-webkit-transform:rotate(20deg) scale(0.8);
}
.pic2{
transform:rotate(10deg) scale(0.7);
}
.pic3{
transform:rotate(15deg) scale(0.75);
}
.pic4{
transform:rotate(-20deg) scale(0.7);
}
.pic5{
transform:rotate(10deg) scale(0.8);
}
.pic6{
transform:rotate(-12deg) scale(0.7);
}
.pic7{
transform:rotate(-16deg) scale(0.8);
}
img:hover{
cursor: pointer;
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
z-index:2;
}
</style>
</head>
<body>
<div class="container">
<img class="pic1" src="images/菜01.png"/>
<img class="pic2" src="images/菜02.png"/>
<img class="pic3" src="images/菜03.png"/>
<img class="pic4" src="images/菜04.png"/>
<img class="pic5" src="images/菜05.png"/>
<img class="pic6" src="images/菜06.png"/>
<img class="pic7" src="images/菜07.png"/>
</div>
</body>
</html>
-
transition属性要写在图片的属性里，不要写在hover的属性里，不然只有鼠标移上去的时候有时间的变化，而移开时一下子就变回原样了，一点都不好看
-
然后就是我设置z-index的时候一直怀疑我自己是不是设置错了看不到效果，结果是我的图片傍边是透明的不能仔细看出来，后来就给图片设置一个白色的背景颜色，就可以清晰看到它的层次变化了。
-
原本以为这个会有点难度，但是自己试一试之后又好像很简单了，快乐。
-
原本上周就该写好了，但是我又懒了，嗐，，，