多彩照片墙（案例）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多彩照片墙</title>
<style type="text/css">
div{width:1360px; margin:0 auto; position:relative;}
div img{
border:1px #CCCCCC solid;
padding:10px;
background:#FFF;
position:absolute;
transition:all 0.8s ease-in-out;/*过渡的触发机制，慢动作（秒数越大，速度越慢）*/
-ms-transition:all 0.8s ease-in-out;/*兼容IE9浏览器*/
-webkit-transition:all 0.8s ease-in-out;/*兼容谷歌浏览器*/
-o-transition:all 0.8s ease-in-out;/*兼容opera浏览器*/
-moz-transition:all 0.8s ease-in-out;/*兼容火狐浏览器*/
}
div img:nth-child(even){ /*even表示下标为奇数*/
width:200px;
}
div img:nth-child(odd){ /*odd表示下标为偶数*/
width:300px;
}
div img:nth-child(1){
top:150px;
left:300px;
transform:rotate(20deg);
}
div img:nth-child(2){
top:150px;
left:100px;
transform:rotate(-20deg);
}
div img:nth-child(3){
top:150px;
left:600px;
transform:rotate(0deg);
}
div img:nth-child(4){
top:400px;
left:600px;
transform:rotate(-30deg);
}
div img:nth-child(5){
top:200px;
right:100px;
transform:rotate(30deg);
}
div img:nth-child(6){
top:400px;
right:350px;
transform:rotate(30deg);
}
div img:nth-child(7){
top:400px;
left:150px;
transform:rotate(-30deg);
}
div img:nth-child(8){
top:500px;
left:450px;
transform:rotate(0deg);
}
div img:nth-child(9){
top:500px;
right:120px;
transform:rotate(-20deg);
}
div img:nth-child(10){
top:550px;
right:450px;
transform:rotate(5deg);
}
/*鼠标放上去的效果*/
div img:hover{
z-index:99;
transform:rotate(360deg) scale(1.5);/*2D旋转 deg参数为旋转的角度*/
-ms-transform:rotate(360deg) scale(1.5);/*兼容IE9浏览器*/
-webkit-transform:rotate(360deg) scale(1.5);/*兼容谷歌浏览器*/
-o-transform:rotate(360deg) scale(1.5);/*兼容opera浏览器*/
-moz-transform:rotate(360deg) scale(1.5);/*兼容火狐浏览器*/
}
</style>
</head>
<body>
<div>
<img src="image/1.jpg" alt="">
<img src="image/2.jpg" alt="">
<img src="image/3.jpg" alt="">
<img src="image/4.jpg" alt="">
<img src="image/5.jpg" alt="">
<img src="image/6.jpg" alt="">
<img src="image/7.jpg" alt="">
<img src="image/8.jpg" alt="">
<img src="image/9.jpg" alt="">
<img src="image/10.jpg" alt="">
</div>
</body>
</html>
|