鼠标经过效果
<style>
.user_box{margin:0 auto;width:990px;height:100px;display:block;background:#eee;}
.user_box .b1{width:196px;height:100px;display:block;overflow:hidden;background:#ccc;float:left;border:1px solid #333;}
.user_box .b1 a{position: relative;width:198px;height:100px;display:block;overflow:hidden;}
.user_box .b1 em.b2{left:-50px;width:50px;height:100px;display:block;overflow:hidden;background:#666;position: absolute;transition: all .5s ease-in-out 0.05s;z-index:2;}
.user_box .b1 em.b3{left:-146px;width:146px;height:100px;display:block;overflow:hidden;background:#999;position: absolute;transition: all .5s ease-in-out 0.05s;}
.user_box .b1 a:hover{zoom:1}
.user_box .b1 a:hover em.b2{left:0px;transition: all .5s ease-in-out 0.05s;}
.user_box .b1 a:hover em.b3{left:50px;transition: all .5s ease-in-out 0.05s;}
</style>
<ul class="user_box">
<li class="b1">
<a href="#">
<em class="b2"></em>
<em class="b3"></em></a></li>
<li class="b1">
<a href="#">
<em class="b2"></em>
<em class="b3"></em></a></li>
</ul>根据需要自己添加图片和文字、、相关代码放在jshop自定义内容区源代码内。
演示连接：http://www.jdcss.com/demo/09.html
RSS Feed