纯css3代码写九宫格效果

浏览数：27 / 时间：2015年06月09日

主要用到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>