CSS3 动感反转开关灯效果代码（未测试）
本身效果是半透明的，因为gif图片的关系，这里的图片变成全黑了。
[温馨提示] 一次请只打开一个效果，查看下一个效果前请关闭其他效果，开太多会很卡。
css3效果不支持低版本IE内核浏览器，部分浏览器没有动态效果。
这里的方法跟我发的上一篇帖子效果是一样的，就不赘述了。
效果不需要额外订购CSS服务。
上代码给大家参考一下，请勿直接复制到自己店铺。
--------------------html部分--------------------
<!-- ImageReady Slices (动感反转开关灯.psd) -->
<table class="fz_table" id="__01" width="950" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="fz_yz footer"><img src="http://img03.taobaocdn.com/imgextra/i3/41251343/T2vPY.XwNXXXXXXXXX-41251343.jpg" width="317" height="200" alt="">
<div class="black01_yz footer-more-trigger"></div>
<div class="black02_yz footer-more-trigger"></div>
</div></td>
<td>
<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="">
<div class="black01_yz footer-more-trigger"></div>
<div class="black02_yz footer-more-trigger"></div>
</div></td>
<td>
<div class="fz_yz footer"><img src="http://img01.taobaocdn.com/imgextra/i1/41251343/T2cHj.XyXXXXXXXXXX-41251343.jpg" width="317" height="200" alt="">
<div class="black01_yz footer-more-trigger"></div>
<div class="black02_yz footer-more-trigger"></div>
</div></td>
</tr>
<tr>
<td>
<div class="fz_yz footer"><img src="http://img01.taobaocdn.com/imgextra/i1/41251343/T2L.b8XBNXXXXXXXXX-41251343.jpg" width="317" height="200" alt="">
<div class="black01_yz footer-more-trigger"></div>
<div class="black02_yz footer-more-trigger"></div>
</div></td>
<td>
<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="">
<div class="black01_yz footer-more-trigger"></div>
<div class="black02_yz footer-more-trigger"></div>
</div></td>
<td>
<div class="fz_yz footer"><img src="http://img02.taobaocdn.com/imgextra/i2/41251343/T24mj5XuVaXXXXXXXX-41251343.jpg" width="317" height="200" alt="">
<div class="black01_yz footer-more-trigger"></div>
<div class="black02_yz footer-more-trigger"></div>
</div></td>
</tr>
</table>
<!-- End ImageReady Slices -->
--------------------CSS部分--------------------
/*效果展示页--动感反转开关灯*/
.fz_yz{ width:317px; height:200px; overflow:hidden; position:relative; border:0; padding:0; margin:0;}
.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;
-moz-transition: all 1s;/* Firefox 4 */
-webkit-transition:all 1s;/* Safari 和 Chrome */
-o-transition:all 1s;}
.fz_table .black01_yz{ left:-100%;}
.fz_table .black02_yz{ left:100%;}
.fz_table:hover .black01_yz,.fz_table:hover .black02_yz{ left:0;transition: all 1s;
-moz-transition: all 1s;/* Firefox 4 */
-webkit-transition:all 1s;/* Safari 和 Chrome */
-o-transition:all 1s;}
.fz_table:hover .fz_yz:hover .black01_yz{ left:-100%; top:-100%;}
.fz_table:hover .fz_yz:hover .black02_yz{ left:100%; top:100%;}
/*--效果展示页--动感反转开关灯 end--*/
页:
[1]