Hover鼠标滑过CSS3过渡位移效果（如图）

最近看到某电器旗舰店的效果，就仿下来了
淘宝天猫通用，已经添加了C店天猫的class名
注意要改偏移left的值！
因为图片都放在 CSS部分里面，所以装修状态是看不到效果的，要发布再看效果哈


根据大家反应的，鼠标滑过才出现，移开是白背景，少了这段CSS，加上去你少了这段CSS，加上去

1. .shiyan_lsm {
   
2.   background:url(http://img04.taobaocdn.com/imgex ... XXXXX-686821827.jpg) 0px 0px no-repeat;
   
3. }

复制代码

1. <!--放导航CSS部分-->
   
2. <style>
   
3. .shiyan_lsm {
   
4.   background:url(http://img04.taobaocdn.com/imgextra/i4/686821827/TB2PkV1aXXXXXb_XXXXXXXXXXXX-686821827.jpg) 0px 0px no-repeat;
   
5. }
   
6. .shiyan_lsm:hover {
   
7.   background:url(http://img04.taobaocdn.com/imgextra/i4/686821827/TB2PkV1aXXXXXb_XXXXXXXXXXXX-686821827.jpg) -40px 0px no-repeat;
   
8. }
   
9. .shiyan_lsm .shiyan_lsm01 {
   
10.   left:1000px;
    
11.   top:200px;
    
12.   background:url(http://img02.taobaocdn.com/imgextra/i2/686821827/TB2YupFaXXXXXbKXpXXXXXXXXXX_!!686821827.png) no-repeat;
    
13. }
    
14. .shiyan_lsm:hover .shiyan_lsm01 {
    
15.   left:950px;
    
16.   top:200px;
    
17. }
    
18. .shiyan_lsm .shiyan_lsm02 {
    
19.   left:300px;
    
20.   top:180px;
    
21.   background:url(http://img01.taobaocdn.com/imgextra/i1/686821827/TB2jrFIaXXXXXbbXpXXXXXXXXXX_!!686821827.png) no-repeat;
    
22. }
    
23. .shiyan_lsm:hover .shiyan_lsm02 {
    
24.   left:450px;
    
25.   top:180px;
    
26. }
    
27. .shiyan_lsm .shiyan_lsm03 {
    
28.   left:1200px;
    
29.   top:180px;
    
30.   background:url(http://img01.taobaocdn.com/imgextra/i1/686821827/TB2Ju0IaXXXXXbIXpXXXXXXXXXX_!!686821827.png) no-repeat;
    
31. }
    
32. .shiyan_lsm:hover .shiyan_lsm03 {
    
33.   left:1300px;
    
34.   top:180px;
    
35. }
    
36. .shiyan_lsm .shiyan_lsm04 {
    
37.   left:1200px;
    
38.   top:550px;
    
39.   background:url(http://img04.taobaocdn.com/imgextra/i4/686821827/TB2uXFHaXXXXXaSXpXXXXXXXXXX_!!686821827.png) no-repeat;
    
40. }
    
41. .shiyan_lsm:hover .shiyan_lsm04 {
    
42.   left:1300px;
    
43.   top:550px;
    
44. }
    
45. </style>
    
46. <!--放导航CSS部分END-->
    
47. 
    
48. 
    
49. <!--放自定义部分-->
    
50. <div style="height:743px;">
    
51.   <div class="footer-more-trigger sn-simple-logo" style="width:2041px;height:743px;padding:0px;left:50%;border:0;top:auto;">
    
52.     <div class="footer-more-trigger sn-simple-logo" style="width:2041px;height:743px;padding:0px;left:-960px;border:0;top:auto;z-index:2;">
    
53.       <div class="J_TWidget" data-title="代码来自誓言 QQ506896079  http://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; ">
    
54.         <ul class="content_shiyan01" style="display: none; position: absolute; width: 999999px; left: 0px; ">
    
55.           <li class="ks-switchable-panel-internal283" style="display: block; float: left; "> </li>
    
56.         </ul>
    
57.         <ul class="nav_shiyan01">
    
58.           <!--这里开始写内容部分-->
    
59.           <li style="width:950px;height:500px;">
    
60.             <div class="shiyan_lsm footer-more-trigger sn-simple-logo" style="width:2041px; height:743px; padding:0px; border:0;  transition: all 1s;
    
61.   -moz-transition: all 1s;
    
62.   -webkit-transition: all 1s;
    
63.   -o-transition: all 1s;
    
64. ">
    
65.               <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;
    
66.   -moz-transition: all 1s;
    
67.   -webkit-transition: all 1s;
    
68.   -o-transition: all 1s;
    
69. 
    
70. "></div> </a>
    
71.                <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;
    
72.   -moz-transition: all 1s;
    
73.   -webkit-transition: all 1s;
    
74.   -o-transition: all 1s;
    
75. 
    
76. "></div>
    
77.             </a>
    
78.                <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;
    
79.   -moz-transition: all 1s;
    
80.   -webkit-transition: all 1s;
    
81.   -o-transition: all 1s;
    
82. 
    
83. "></div>
    
84.              </a>
    
85.                <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;
    
86.   -moz-transition: all 1s;
    
87.   -webkit-transition: all 1s;
    
88.   -o-transition: all 1s;
    
89. 
    
90. "></div></a>
    
91.             </div>            
    
92.             <!--这里开始写内容部分-->
    
93.           </li>
    
94.         </ul>
    
95.       </div>
    
96.     </div>
    
97.   </div>
    
98. </div>
    
99. </div>
    
100. <!--放自定义部分END-->

复制代码

看了LZ的帖子，我只想说一句很好很强大！