<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片画廊</title>
<style type="text/css">
body{
/*设置背景墙*/
background:#F90;
}
#gallery{
margin:10px auto;
padding:40px;
list-style:none;
width:530px;
}
#gallery li{
float:left;
width:106px;
height:80px;
/*溢出仍然显示完整内容*/
overflow:visible;
}
#gallery li a {
color:#333;
text-decoration:none;
font-size:4px;
display:block;
text-align:center;
background-color:#FFF;
padding:3px;
opacity:0.8;
/*设置元素阴影*/
box-shadow:0 0 5px 2px #333;
}
#gallery li a{
/*设计样式的过渡效果*/
-webkit-transition:all 500ms linear;
-moz-transition:all 5ooms linear;
transition:all 500ms linear;
/*自定义变形原点*/
-webkit-transition-origin:0 0 ;
-moz-transition-origin: 0 0 ;
transition-origin:0 0 ;
/*旋转变形*/
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
transform-rotate:(-15deg);
}
#gallery li a img{
width:100px;
}
#gallery li:nth-child(3n) a{
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
transform:rotate(20deg);
}
#gallery li:nth-child(4n) a{
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
transform:rotate(15deg);
}
#gallery li:nth-child(7n) a{
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
transform:rotate(-10deg);
}
#gallery li:nth-child(9n) a{
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
transform:rotate(-20deg);
}
#gallery li a:hover{
position:relative;
z-index:999;
opacity:1;
/*旋转并放大*/
-webkit-transform:rotate(0deg) scale(2);
-moz-transform:rotate(0deg) scale(2);
transform:rotate(0deg) scale(2);
}
#gallery li a:hover:after{
content:attr(title);
}
</style>
</head>
<body>
<ul id="gallery">
<li><a href="#" title="图片1"><img src="../images/1.jpg" alt="图片1"></a></li>
<li><a href="#" title="图片2"><img src="../images/2.jpg" alt="图片2"></a></li>
<li><a href="#" title="图片3"><img src="../images/3.jpg" alt="图片3"></a></li>
<li><a href="#" title="图片4"><img src="../images/4.jpg" alt="图片4"></a></li>
<li><a href="#" title="图片5"><img src="../images/5.jpg" alt="图片5"></a></li>
<li><a href="#" title="图片6"><img src="../images/6.jpg" alt="图片6"></a></li>
<li><a href="#" title="图片7"><img src="../images/7.jpg" alt="图片7"></a></li>
<li><a href="#" title="图片8"><img src="../images/8.jpg" alt="图片8"></a></li>
<li><a href="#" title="图片9"><img src="../images/9.jpg" alt="图片9"></a></li>
<li><a href="#" title="图片10"><img src="../images/10.jpg" alt="图片10"></a></li>
<li><a href="#" title="图片11"><img src="../images/11.jpg" alt="图片11"></a></li>
<li><a href="#" title="图片12"><img src="../images/12.jpg" alt="图片12"></a></li>
<li><a href="#" title="图片13"><img src="../images/13.jpg" alt="图片13"></a></li>
<li><a href="#" title="图片14"><img src="../images/14.jpg" alt="图片14"></a></li>
</ul>
</body>
</html>