CSS3 动感反转开关灯效果代码（未测试）

本身效果是半透明的，因为gif图片的关系，这里的图片变成全黑了。

[温馨提示] 一次请只打开一个效果，查看下一个效果前请关闭其他效果，开太多会很卡。
css3效果不支持低版本IE内核浏览器，部分浏览器没有动态效果。

这里的方法跟我发的上一篇帖子效果是一样的，就不赘述了。
效果不需要额外订购CSS服务。
上代码给大家参考一下，请勿直接复制到自己店铺。


--------------------html部分--------------------

1. 
   
2. <!-- ImageReady Slices (动感反转开关灯.psd) -->
   
3. <table class="fz_table" id="__01" width="950" height="400" border="0" cellpadding="0" cellspacing="0">
   
4.   <tr>
   
5.     <td>
   
6.       <div class="fz_yz footer"><img src="http://img03.taobaocdn.com/imgextra/i3/41251343/T2vPY.XwNXXXXXXXXX-41251343.jpg" width="317" height="200" alt="">
   
7.          <div class="black01_yz footer-more-trigger"></div>
   
8.          <div class="black02_yz footer-more-trigger"></div>
   
9.       </div></td>
   
10.     <td>
    
11.       <div class="fz_yz footer" style="width:316px;"><img src="http://img02.taobaocdn.com/imgextra/i2/41251343/T2DIIaXptXXXXXXXXX-41251343.jpg" width="316" height="200" alt="">
    
12.          <div class="black01_yz footer-more-trigger"></div>
    
13.          <div class="black02_yz footer-more-trigger"></div>
    
14.       </div></td>
    
15.     <td>
    
16.       <div class="fz_yz footer"><img src="http://img01.taobaocdn.com/imgextra/i1/41251343/T2cHj.XyXXXXXXXXXX-41251343.jpg" width="317" height="200" alt="">
    
17.          <div class="black01_yz footer-more-trigger"></div>
    
18.          <div class="black02_yz footer-more-trigger"></div>
    
19.       </div></td>
    
20.   </tr>
    
21.   <tr>
    
22.     <td>
    
23.       <div class="fz_yz footer"><img src="http://img01.taobaocdn.com/imgextra/i1/41251343/T2L.b8XBNXXXXXXXXX-41251343.jpg" width="317" height="200" alt="">
    
24.          <div class="black01_yz footer-more-trigger"></div>
    
25.          <div class="black02_yz footer-more-trigger"></div>
    
26.       </div></td>
    
27.     <td>
    
28.       <div class="fz_yz footer" style="width:316px;"><img src="http://img01.taobaocdn.com/imgextra/i1/41251343/T2i0Y5XvhaXXXXXXXX-41251343.jpg" width="316" height="200" alt="">
    
29.          <div class="black01_yz footer-more-trigger"></div>
    
30.          <div class="black02_yz footer-more-trigger"></div>
    
31.       </div></td>
    
32.     <td>
    
33.       <div class="fz_yz footer"><img src="http://img02.taobaocdn.com/imgextra/i2/41251343/T24mj5XuVaXXXXXXXX-41251343.jpg" width="317" height="200" alt="">
    
34.          <div class="black01_yz footer-more-trigger"></div>
    
35.          <div class="black02_yz footer-more-trigger"></div>
    
36.       </div></td>
    
37.   </tr>
    
38. </table>
    
39. <!-- End ImageReady Slices -->
    

复制代码

--------------------CSS部分--------------------

1. /*效果展示页--动感反转开关灯*/
   
2. .fz_yz{ width:317px; height:200px; overflow:hidden; position:relative; border:0; padding:0; margin:0;}
   
3. .fz_table .black01_yz,.fz_table .black02_yz{ width:100%; height:100%; border:0; padding:0; background:url(http://img02.taobaocdn.com/imgextra/i2/41251343/T2OLJ.XztXXXXXXXXX-41251343.png) repeat; top:0;transition: all 1s;
   
4. -moz-transition: all 1s;  /* Firefox 4 */
   
5. -webkit-transition:all 1s;  /* Safari 和 Chrome */
   
6. -o-transition:all 1s;}
   
7. .fz_table .black01_yz{ left:-100%;}
   
8. .fz_table .black02_yz{ left:100%;}
   
9. .fz_table:hover .black01_yz,.fz_table:hover .black02_yz{ left:0;transition: all 1s;
   
10. -moz-transition: all 1s;  /* Firefox 4 */
    
11. -webkit-transition:all 1s;  /* Safari 和 Chrome */
    
12. -o-transition:all 1s;}
    
13. .fz_table:hover .fz_yz:hover .black01_yz{ left:-100%; top:-100%;}
    
14. .fz_table:hover .fz_yz:hover .black02_yz{ left:100%; top:100%;}
    
15. /*--效果展示页--动感反转开关灯 end--*/

复制代码