标签：
/*代码大家看看*/
<style> body{ background: #ccc; } #box{ font-family: "微软雅黑"; font-size: 30px; text-align: center; width: 800px; height: 400px; margin: 100px auto; position: relative; overflow: hidden; border:20px solid #fff; } #box div{ -webkit-transition:all 0.5s; -ms-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; position: absolute; width:25%; height: 400px; z-index: 0; } #one { background: url(1.jpg); left:0%; } #one:hover { z-index: 999; width:100%; } #two { left:25%; background: url(2.jpg); box-shadow: -10px 0px 20px #000; -webkit-box-shadow: -10px 0px 20px #000; -moz-box-shadow: -10px 0px 20px #000; -o-box-shadow: -10px 0px 20px #000; -ms-box-shadow: -10px 0px 20px #000; } #two:hover { left:0%; width:100%; z-index: 999; } #three { left:50%; background: url(3.jpg); box-shadow: -10px 0px 20px #000; -webkit-box-shadow: -10px 0px 20px #000; -moz-box-shadow: -10px 0px 20px #000; -o-box-shadow: -10px 0px 20px #000; -ms-box-shadow: -10px 0px 20px #000; } #three:hover { left:0%; width:100%; z-index: 999; } #four { left:75%; background: url(4.jpg); box-shadow: -10px 0px 20px #000; -webkit-box-shadow: -10px 0px 20px #000; -moz-box-shadow: -10px 0px 20px #000; -o-box-shadow: -10px 0px 20px #000; -ms-box-shadow: -10px 0px 20px #000; } #four:hover { left:0%; width:100%; z-index: 999; } p { color:#fff; transition: all 1s 0.5s; -moz-transition: all 1s 0.5s; -webkit-transition: all 1s 0.5s; -o-transition: all 1s 0.5s; -ms-transition: all 1s 0.5s; } #box p{ position: absolute; width: 100%; height: 50px; background: #000000; opacity: 0.5; filter: alpha(opacity:50); top:100%; } #one:hover #oone { top:80%; } #two:hover #ttwo { top:80%; } #three:hover #tthree { top:80%; } #four:hover #ffour { top:80%; } </style>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"> <div id="one"> <p id="oone">第一张图</p> </div> <div id="two"><p id="ttwo">第二张图</p></div> <div id="three"><p id="tthree">第三张图</p></div> <div id="four"><p id="ffour">第四张图</p></div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/lvyestudy/p/5444454.html
