所有浏览器都支持 opacity 属性。注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。opacity 属性设置元素的不透明级别。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS3 transitions gallery</title>
<style>
body {
background: #dce4e4;
font-family: Georgia, "Times New Roman", Times, serif;
}
#gallery {
width: 1000px;
height: 1200px;
margin: 20px auto;
padding: 40px;
position: relative;
}
#gallery div {
background: #fff;
position: absolute;
overflow: hidden;
opacity: 0.9;
-webkit-transition: all 500ms linear;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: -3px -3px 50px #666;
-moz-box-shadow: -3px -3px 50px #666;
box-shadow: -3px -3px 50px #666;
}
#gallery div#img1:hover, #gallery div#img2:hover, #gallery div#img3:hover, #gallery div#img4:hover, #gallery div#img5:hover, #gallery div#img6:hover {
z-index: 999;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
opacity: 1;
}
#gallery span {
position: absolute;
right: 0;
bottom: 15px;
color: #999;
background: #fff;
width: 35%;
text-align: right;
padding: 10px;
font-size: 13px;
font-weight: bold;
}
#gallery img {
-webkit-mask-box-image: url(images/background.svg);
-webkit-mask-repeat: none;
}
#gallery #img1 {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
top: 50px;
left: 130px;
z-index:1;
}
#gallery #img2 {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
top: 300px;
left:100px;
z-index:7;
}
#gallery #img3 {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-15deg);
top: 450px;
left:350px;
z-index:3;
}
#img3 img {
width: 350px;
}
#gallery #img4 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
top: 450px;
left: 650px;
z-index:4;
}
#gallery #img5 {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
top: -100px;
right: 200px;
z-index:5;
}
#gallery #img6 {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
top: 220px;
right: 120px;
z-index:6;
}
</style>
</head>
<body>
<div id="gallery">
<div id="img1"> <img src="images/image1.jpg"> <span>Image 1 caption</span> </div>
<div id="img2"> <img src="images/image2.jpg"> <span>Image 2 caption</span> </div>
<div id="img3"> <img src="images/image3.jpg"> <span>Image 3 caption</span> </div>
<div id="img4"> <img src="images/image4.jpg"> <span>Image 4 caption</span> </div>
<div id="img5"> <img src="images/image5.jpg"> <span>Image 5 caption</span> </div>
<div id="img6"> <img src="images/image6.jpg"> <span>Image 6 caption</span> </div>
</div>
</body>
</html>
Processed:
0.012, SQL:
9
