淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 38057|回复: 198
收起左侧

【誓言】Hover鼠标滑过CSS3过渡位移效果(如图)

  [复制链接]
  • TA的每日心情
    抱抱
    2017-6-11 08:59
  • 签到天数: 172 天

    连续签到: 1 天

    [LV.7]炉火纯青

    31

    主题

    949

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    96389

    最佳新人热心会员宣传达人活跃会员

    QQ
    发表于 2014-8-3 14:07:22 | 显示全部楼层 |阅读模式
    本帖最后由 誓言芜罪 于 2014-8-3 14:09 编辑

    有图有真相
    111.gif

    效果预览地址(第二屏)http://506896079.taobao.com

           最近看到某电器旗舰店的效果,就仿下来了
          淘宝天猫通用,已经添加了C店天猫的class名
          注意要改偏移left的值!


    代码如下
    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. <div style="height:743px;">
    49.   <div class="footer-more-trigger sn-simple-logo" style="width:2041px;height:743px;padding:0px;left:50%;border:0;top:auto;">
    50.     <div class="footer-more-trigger sn-simple-logo" style="width:2041px;height:743px;padding:0px;left:-960px;border:0;top:auto;z-index:2;">
    51.       <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; ">
    52.         <ul class="content_shiyan01" style="display: none; position: absolute; width: 999999px; left: 0px; ">
    53.           <li class="ks-switchable-panel-internal283" style="display: block; float: left; "> </li>
    54.         </ul>
    55.         <ul class="nav_shiyan01">
    56.           <!--这里开始写内容部分-->
    57.           <li style="width:950px;height:500px;">
    58.             <div class="shiyan_lsm footer-more-trigger sn-simple-logo" style="width:2041px; height:743px; padding:0px; border:0;  transition: all 1s;
    59.   -moz-transition: all 1s;
    60.   -webkit-transition: all 1s;
    61.   -o-transition: all 1s;
    62. ">
    63.               <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;
    64.   -moz-transition: all 1s;
    65.   -webkit-transition: all 1s;
    66.   -o-transition: all 1s;

    67. "></div> </a>
    68.                <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;
    69.   -moz-transition: all 1s;
    70.   -webkit-transition: all 1s;
    71.   -o-transition: all 1s;

    72. "></div>
    73.             </a>
    74.                <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;
    75.   -moz-transition: all 1s;
    76.   -webkit-transition: all 1s;
    77.   -o-transition: all 1s;

    78. "></div>
    79.              </a>
    80.                <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;
    81.   -moz-transition: all 1s;
    82.   -webkit-transition: all 1s;
    83.   -o-transition: all 1s;

    84. "></div></a>
    85.             </div>            
    86.             <!--这里开始写内容部分-->
    87.           </li>
    88.         </ul>
    89.       </div>
    90.     </div>
    91.   </div>
    92. </div>
    93. </div>
    94. <!--放自定义部分END-->
    复制代码












    补充内容 (2014-8-5 12:11):
    因为图片都放在 CSS部分里面,所以装修状态是看不到效果的,要发布再看效果哈

    补充内容 (2014-8-13 17:15):
    根据大家反应的,鼠标滑过才出现,移开是白背景,少了这段CSS,加上去你少了这段CSS,加上去
    .shiyan_lsm {
      background:url(http://img04.taobaocdn.com/imgex ... XXXXX-686821827.jpg) 0px 0px no-repeat;
    }


    说来也奇怪,我帖子里面明明完整的,CSS最上面那段

    shiyan.zip

    1.15 KB, 下载次数: 374, 下载积分: 美工币 -2

    代码

    评分

    参与人数 24美工币 +501 收起 理由
    路过时光尽头 + 20 感谢分享!
    最坚强的泡沫 + 20 赞一个!
    暗暝 + 20 很给力!
    小小侠 + 20 超级大的启发
    chrisknight + 10 赞一个!
    gjj + 20 很给力!
    初见澜儿 + 10 牛人
    kkybk + 10
    独钓寒江雪 + 1 我想拜师。。。。。。。。。。.
    没事找找虐 + 20 赞一个!
    jjz + 20 很给力!
    不想插在牛粪上 + 20 很给力!
    binwuhui + 20 这么叼,你媳妇造吗
    dnvtg + 20 很给力!
    美丽府 + 10 很给力!
    caisijia + 20 很给力!请问是哪个电器店呢?不懂得应用在.
    kinjets + 20 很给力!
    gxzhou + 100 感谢分享!
    定月 + 20 大神大神,和渔舟那种级别的!.
    斯洛文day + 20 感谢分享!

    查看全部评分

  • TA的每日心情
    抱抱
    2017-6-11 08:59
  • 签到天数: 172 天

    连续签到: 1 天

    [LV.7]炉火纯青

    31

    主题

    949

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    96389

    最佳新人热心会员宣传达人活跃会员

    QQ
     楼主| 发表于 2014-8-13 17:14:00 | 显示全部楼层
    江苏无锡 发表于 2014-8-5 09:27
    楼主  请问下为什么你的店打开就是那种海报背景 而我的店里却是鼠标移上去才显示海报背景  鼠标离开是白色 ...

    你少了这段CSS,加上去
    1. .shiyan_lsm {
    2.   background:url(http://img04.taobaocdn.com/imgextra/i4/686821827/TB2PkV1aXXXXXb_XXXXXXXXXXXX-686821827.jpg) 0px 0px no-repeat;
    3. }
    复制代码



  • TA的每日心情
    抱抱
    2017-6-11 08:59
  • 签到天数: 172 天

    连续签到: 1 天

    [LV.7]炉火纯青

    31

    主题

    949

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    96389

    最佳新人热心会员宣传达人活跃会员

    QQ
     楼主| 发表于 2014-8-3 15:37:12 | 显示全部楼层

    你可以试下,应该可以

    评分

    参与人数 1美工币 +10 收起 理由
    雪卡古雅 + 10 很给力!

    查看全部评分

    回复 支持 1 反对 0

    使用道具 举报

  • TA的每日心情
    抱抱
    2017-6-11 08:59
  • 签到天数: 172 天

    连续签到: 1 天

    [LV.7]炉火纯青

    31

    主题

    949

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    96389

    最佳新人热心会员宣传达人活跃会员

    QQ
     楼主| 发表于 2014-8-3 14:08:20 | 显示全部楼层
    沙发我的

    评分

    参与人数 1美工币 +7 收起 理由
    vip灬阿门 + 7 很给力!

    查看全部评分

  • TA的每日心情

    2016-4-8 17:27
  • 签到天数: 214 天

    连续签到: 1 天

    [LV.7]炉火纯青

    2

    主题

    460

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    44592

    天猫美工最佳新人热心会员

    发表于 2014-8-3 14:10:45 | 显示全部楼层
    前排支持!

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    大哭
    2015-11-15 15:32
  • 签到天数: 194 天

    连续签到: 1 天

    [LV.7]炉火纯青

    44

    主题

    712

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    54524

    热心会员最佳新人活跃会员

    QQ
    发表于 2014-8-3 14:16:19 | 显示全部楼层
    CSS 通过淘宝自带的J_TWidget 轮播类来引用
  • TA的每日心情

    2017-10-2 00:50
  • 签到天数: 1206 天

    连续签到: 1 天

    [LV.10]功行圆满

    60

    主题

    6128

    帖子

    54万

    积分

    版主

    阅读权限: 100

    黄皮很酸吗? 糖糖很甜吗? 亲 我一下犯法吗?

    Rank: 12Rank: 12Rank: 12

    积分
    542969

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    QQ
    发表于 2014-8-3 14:19:50 | 显示全部楼层
    NB啊!这让我不知所措...
    >>>>>>挖掘淘宝Bug与代应用:364384606<<<<<<
  • TA的每日心情

    前天 00:51
  • 签到天数: 683 天

    连续签到: 1 天

    [LV.9]已臻大成

    41

    主题

    1346

    帖子

    12万

    积分

    高级会员

    阅读权限: 50

    没有什么问题是人民币解决不了的,如果有,那就美金

    Rank: 8Rank: 8

    积分
    120157

    最佳新人活跃会员热心会员优秀版主淘宝皇冠店美工淘宝钻级店美工天猫美工宣传达人灌水之王

    发表于 2014-8-3 14:24:48 | 显示全部楼层
    哇,誓言大神公布了,虽然可以用了,但是发生偏移了左边有一块空白,怎么改啊
    本人比较懒,懒懒懒懒懒!
  • TA的每日心情
    抱抱
    2017-6-11 08:59
  • 签到天数: 172 天

    连续签到: 1 天

    [LV.7]炉火纯青

    31

    主题

    949

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    96389

    最佳新人热心会员宣传达人活跃会员

    QQ
     楼主| 发表于 2014-8-3 14:27:40 | 显示全部楼层
    vip灬阿门 发表于 2014-8-3 14:24
    哇,誓言大神公布了,虽然可以用了,但是发生偏移了左边有一块空白,怎么改啊
    ...

    帖子已经有说明了,改那个left值,你的是基础版吧,left:-960px;  改为left:-1040px;

  • TA的每日心情

    前天 00:51
  • 签到天数: 683 天

    连续签到: 1 天

    [LV.9]已臻大成

    41

    主题

    1346

    帖子

    12万

    积分

    高级会员

    阅读权限: 50

    没有什么问题是人民币解决不了的,如果有,那就美金

    Rank: 8Rank: 8

    积分
    120157

    最佳新人活跃会员热心会员优秀版主淘宝皇冠店美工淘宝钻级店美工天猫美工宣传达人灌水之王

    发表于 2014-8-3 14:28:42 | 显示全部楼层
    vip灬阿门 发表于 2014-8-3 14:24
    哇,誓言大神公布了,虽然可以用了,但是发生偏移了左边有一块空白,怎么改啊
    ...

    误打误撞随便找了个left-960改成-1060居然正好可以用了,多谢誓言大神

    本人比较懒,懒懒懒懒懒!
  • TA的每日心情

    前天 00:51
  • 签到天数: 683 天

    连续签到: 1 天

    [LV.9]已臻大成

    41

    主题

    1346

    帖子

    12万

    积分

    高级会员

    阅读权限: 50

    没有什么问题是人民币解决不了的,如果有,那就美金

    Rank: 8Rank: 8

    积分
    120157

    最佳新人活跃会员热心会员优秀版主淘宝皇冠店美工淘宝钻级店美工天猫美工宣传达人灌水之王

    发表于 2014-8-3 14:31:30 | 显示全部楼层
    誓言芜罪 发表于 2014-8-3 14:27
    帖子已经有说明了,改那个left值,你的是基础版吧,left:-960px;  改为left:-1040px;

    ...

    好吧。。 改-1040了

    本人比较懒,懒懒懒懒懒!
  • TA的每日心情
    抱抱
    2017-6-11 08:59
  • 签到天数: 172 天

    连续签到: 1 天

    [LV.7]炉火纯青

    31

    主题

    949

    帖子

    9万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    96389

    最佳新人热心会员宣传达人活跃会员

    QQ
     楼主| 发表于 2014-8-3 14:33:32 | 显示全部楼层
    峰生水起之林 发表于 2014-8-3 14:19
    NB啊!这让我不知所措...

    那就给俺加分吧,班猪

    评分

    参与人数 1美工币 +10 收起 理由
    vip灬阿门 + 10 很给力!

    查看全部评分

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|坛主个人微信公众号|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2017-10-23 23:06 , Processed in 0.449302 second(s), 51 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表