主要用到css3中的transition和布局知识。代码如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name=""> 6 <title>标题</title> 7 </head> 8 <style type="text/css"> 9 *{margin: 0;padding: 0;} 10 body{background: url(images/bg.jpg);} 11 #demo{ 12 width: 906px; 13 height: 486px; 14 background: rgba(0,0,0,0.4); 15 margin: 80px auto; 16 border:5px solid #fff; 17 } 18 ul,li{list-style: none;} 19 #demo ul li{ 20 float: left; 21 width: 300px; 22 height: 160px; 23 background: #00cc00; 24 border:1px solid #fff; 25 position: relative; 26 } 27 #demo ul li img{ 28 position: absolute; 29 top: 0; 30 left: 0; 31 width: 100%; 32 height: 100%; 33 opacity: 0; 34 -webkit-transition:all 2s linear; 35 -moz-transition:all 2s linear; 36 -ms-transition:all 2s linear; 37 -o-transition:all 2s linear; 38 transition:all 2s linear; 39 } 40 #demo ul li img.default{opacity: 1;} 41 #demo ul li a{ 42 position: absolute; 43 top:0; 44 left: 0; 45 background: rgba(0,0,0,0.5); 46 text-align: center; 47 width: 100%; 48 line-height: 160px; 49 font-size: 22px; 50 color: #fff; 51 text-decoration: none; 52 opacity: 0.5; 53 } 54 #demo ul li:hover a{opacity: 1;} 55 #demo ul li:hover .toBottom{top:162px;opacity: 1;z-index: 999;} 56 #demo ul li:hover .toLeft{left:-302px;opacity: 1;z-index: 999;} 57 #demo ul li:hover .toTop{top:-162px;opacity: 1;z-index: 999;} 58 #demo ul li:hover .toRight{left:302px;opacity: 1;z-index: 999;} 59 </style> 60 <body> 61 <div id="demo"> 62 <ul> 63 <li> 64 <img src="images/img1.png" class="default" /> 65 <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a> 66 <img src="images/seob.jpg" class="toBottom"> 67 <img src="images/seor.jpg" class="toRight"> 68 </li> 69 <li> 70 <img src="images/img2.png" class="default" /> 71 <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a> 72 <img src="images/taob.jpg" class="toBottom"> 73 <img src="images/taor.jpg" class="toRight"> 74 <img src="images/taol.jpg" class="toLeft"> 75 </li> 76 <li> 77 <img src="images/img3.png" class="default" /> 78 <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a> 79 <img src="images/syb.jpg" class="toBottom"> 80 <img src="images/syl.jpg" class="toLeft"> 81 </li> 82 <li> 83 <img src="images/img4.png" class="default" /> 84 <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a> 85 <img src="images/jb.jpg" class="toBottom"> 86 <img src="images/jr.jpg" class="toRight"> 87 <img src="images/jt.jpg" class="toTop"> 88 </li> 89 <li> 90 <img src="images/img5.png" class="default" /> 91 <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a> 92 <img src="images/wr.jpg" class="toRight"> 93 <img src="images/wt.jpg" class="toTop"> 94 <img src="images/wl.jpg" class="toLeft"> 95 <img src="images/wb.jpg" class="toBottom"> 96 </li> 97 <li> 98 <img src="images/img6.png" class="default" /> 99 <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a> 100 <img src="images/pb.jpg" class="toBottom"> 101 <img src="images/pl.jpg" class="toLeft"> 102 <img src="images/pt.jpg" class="toTop"> 103 </li> 104 <li> 105 <img src="images/img7.png" class="default" /> 106 <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a> 107 <img src="images/ynr.jpg" class="toRight"> 108 <img src="images/ynt.jpg" class="toTop"> 109 </li> 110 <li> 111 <img src="images/img8.png" class="default" /> 112 <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a> 113 <img src="images/snr.jpg" class="toRight"> 114 <img src="images/snt.jpg" class="toTop"> 115 <img src="images/snl.jpg" class="toLeft"> 116 </li> 117 <li> 118 <img src="images/img9.png" class="default" /> 119 <a href="http://www.tanzhouedu.com">潭州学院_SEO课程</a> 120 <img src="images/wll.jpg" class="toLeft"> 121 <img src="images/wlt.jpg" class="toTop"> 122 </li> 123 </ul> 124 </div> 125 </body> 126 </html>