主要用到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>
时间： 2024-07-30 02:45:14