opacity 属性设置元素的不透明级别。
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>图片画廊</title>
<style type="text/css">
body {
background:url(images/bark.jpg);
}
#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;
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
transition: all 500ms linear;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
transform-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/image1.jpg" alt="图片1" /></a></li>
<li><a href="#" title="图片2"><img src="images/image2.jpg" alt="图片2" /></a></li>
<li><a href="#" title="图片3"><img src="images/image3.jpg" alt="图片3" /></a></li>
<li><a href="#" title="图片4"><img src="images/image4.jpg" alt="图片4" /></a></li>
<li><a href="#" title="图片5"><img src="images/image5.jpg" alt="图片5" /></a></li>
<li><a href="#" title="图片6"><img src="images/image6.jpg" alt="图片6" /></a></li>
<li><a href="#" title="图片7"><img src="images/image7.jpg" alt="图片7" /></a></li>
<li><a href="#" title="图片8"><img src="images/image8.jpg" alt="图片8" /></a></li>
<li><a href="#" title="图片9"><img src="images/image9.jpg" alt="图片9" /></a></li>
<li><a href="#" title="图片10"><img src="images/image10.jpg" alt="图片10" /></a></li>
<li><a href="#" title="图片11"><img src="images/image11.jpg" alt="图片11" /></a></li>
<li><a href="#" title="图片12"><img src="images/image12.jpg" alt="图片12" /></a></li>
<li><a href="#" title="图片13"><img src="images/image13.jpg" alt="图片13" /></a></li>
<li><a href="#" title="图片14"><img src="images/image14.jpg" alt="图片14" /></a></li>
<li><a href="#" title="图片15"><img src="images/image15.jpg" alt="图片15" /></a></li>
</ul>
</body>
</html>
Processed:
0.018, SQL:
9
