Hover鼠标滑过CSS3过渡位移效果（如图）
最近看到某电器旗舰店的效果，就仿下来了
淘宝天猫通用，已经添加了C店天猫的class名
注意要改偏移left的值！
因为图片都放在 CSS部分里面，所以装修状态是看不到效果的，要发布再看效果哈
根据大家反应的，鼠标滑过才出现，移开是白背景，少了这段CSS，加上去你少了这段CSS，加上去
.shiyan_lsm {
background:url(http://img04.taobaocdn.com/imgex ... XXXXX-686821827.jpg) 0px 0px no-repeat;
}
<!--放导航CSS部分-->
<style>
.shiyan_lsm {
background:url(http://img04.taobaocdn.com/imgextra/i4/686821827/TB2PkV1aXXXXXb_XXXXXXXXXXXX-686821827.jpg) 0px 0px no-repeat;
}
.shiyan_lsm:hover {
background:url(http://img04.taobaocdn.com/imgextra/i4/686821827/TB2PkV1aXXXXXb_XXXXXXXXXXXX-686821827.jpg) -40px 0px no-repeat;
}
.shiyan_lsm .shiyan_lsm01 {
left:1000px;
top:200px;
background:url(http://img02.taobaocdn.com/imgextra/i2/686821827/TB2YupFaXXXXXbKXpXXXXXXXXXX_!!686821827.png) no-repeat;
}
.shiyan_lsm:hover .shiyan_lsm01 {
left:950px;
top:200px;
}
.shiyan_lsm .shiyan_lsm02 {
left:300px;
top:180px;
background:url(http://img01.taobaocdn.com/imgextra/i1/686821827/TB2jrFIaXXXXXbbXpXXXXXXXXXX_!!686821827.png) no-repeat;
}
.shiyan_lsm:hover .shiyan_lsm02 {
left:450px;
top:180px;
}
.shiyan_lsm .shiyan_lsm03 {
left:1200px;
top:180px;
background:url(http://img01.taobaocdn.com/imgextra/i1/686821827/TB2Ju0IaXXXXXbIXpXXXXXXXXXX_!!686821827.png) no-repeat;
}
.shiyan_lsm:hover .shiyan_lsm03 {
left:1300px;
top:180px;
}
.shiyan_lsm .shiyan_lsm04 {
left:1200px;
top:550px;
background:url(http://img04.taobaocdn.com/imgextra/i4/686821827/TB2uXFHaXXXXXaSXpXXXXXXXXXX_!!686821827.png) no-repeat;
}
.shiyan_lsm:hover .shiyan_lsm04 {
left:1300px;
top:550px;
}
</style>
<!--放导航CSS部分END-->
<!--放自定义部分-->
<div style="height:743px;">
<div class="footer-more-trigger sn-simple-logo" style="width:2041px;height:743px;padding:0px;left:50%;border:0;top:auto;">
<div class="footer-more-trigger sn-simple-logo" style="width:2041px;height:743px;padding:0px;left:-960px;border:0;top:auto;z-index:2;">
<div class="J_TWidget" data-title="代码来自誓言 QQ506896079http://506896079.taobao.com" data-widget-type="Carousel" data-widget-config="{'duration':0.1,'activeTriggerCls':'.tshop-pbsm-shop-nav-ch','interval':0.1,'effect':'scrollx','activeIndex':1,'navCls':'nav_shiyan01','contentCls':'content_shiyan01','autoplay':true}" style="position: relative; ">
<ul class="content_shiyan01" style="display: none; position: absolute; width: 999999px; left: 0px; ">
<li class="ks-switchable-panel-internal283" style="display: block; float: left; "> </li>
</ul>
<ul class="nav_shiyan01">
<!--这里开始写内容部分-->
<li style="width:950px;height:500px;">
<div class="shiyan_lsm footer-more-trigger sn-simple-logo" style="width:2041px; height:743px; padding:0px; border:0;transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
">
<a href="http://506896079.taobao.com" target="_blank"><div class="shiyan_lsm01 footer-more-trigger sn-simple-logo" style="width:405px; height:314px; padding:0px; border:0; z-index:1;transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
"></div> </a>
<a href="http://506896079.taobao.com" target="_blank"> <div class="shiyan_lsm02 footer-more-trigger sn-simple-logo" style="width:598px; height:445px; padding:0px; border:0; z-index:2;transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
"></div>
</a>
<a href="http://506896079.taobao.com" target="_blank"> <div class="shiyan_lsm03 footer-more-trigger sn-simple-logo" style="width:232px; height:286px; padding:0px; border:0; z-index:3;transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
"></div>
</a>
<a href="http://506896079.taobao.com" target="_blank"><div class="shiyan_lsm04 footer-more-trigger sn-simple-logo" style="width:159px; height:159px; padding:0px; border:0; z-index:4;transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
"></div></a>
</div>
<!--这里开始写内容部分-->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--放自定义部分END-->
看了LZ的帖子，我只想说一句很好很强大！
页:
[1]