- 所有浏览器都支持 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>