淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1024|回复: 6
收起左侧

[美工相关] 吉普森店铺店招和下面鞋子特效怎么做的?

[复制链接]
  • TA的每日心情
    大哭
    2015-7-3 13:12
  • 签到天数: 32 天

    连续签到: 1 天

    [LV.5]略有小成

    3

    主题

    20

    帖子

    3518

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3518

    QQ
    发表于 2015-5-14 16:56:59 | 显示全部楼层 |阅读模式
    http://jepsen.tmall.com/?spm=a1z10.3-b.w9933203-8968124462.7.gbqYNy&scene=taobao_shop
    鼠标经过鞋子上下浮动,店招鼠标经过从上弹出模块,不是正反面做的?是什么原理?求大神提取css,码盲。

    一朝为道万事空,从此相逢是路人
  • TA的每日心情
    思考
    昨天 12:55
  • 签到天数: 208 天

    连续签到: 1 天

    [LV.7]炉火纯青

    4

    主题

    703

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    19646

    最佳新人热心会员

    发表于 2015-5-14 20:11:54 | 显示全部楼层
    鞋子不错
    我可以划船不用浆,我可以扬帆没有风向,因为我这一生,全靠浪o(∩_∩)o
  • TA的每日心情
    加油
    2015-4-14 08:52
  • 签到天数: 22 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    0

    主题

    34

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    11083

    发表于 2015-5-15 08:49:04 | 显示全部楼层
    CSS部分
    1. .tshop-um-s1 .s1{position:relative;}
    2. .tshop-um-s1 .zui_area{position:relative;width:100%;height:100%;}
    3. .tshop-um-s1 .zui{background:url(//gdp.alicdn.com/L1/142/418719111/assets/images/background/t.gif);position:absolute;text-decoration:none;}
    4. .tshop-um-s1 a img.on{display:block;}
    5. .tshop-um-s1 .abs{position:absolute;}
    6. .tshop-um-s1 a.trans-mt,{overflow:hidden;}
    7. .tshop-um-s1 a.trans-mt img{margin-top:100%;-moz-transition:all 1s ease-in;-webkit-transition:all 1s ease-in;-o-transition:all 1s ease-in;transition:all 1s ease-in;}
    8. .tshop-um-s1 a.trans-mt:hover img{margin-top:0px;}
    9. .tshop-um-s1 .zui_area .zui{-moz-transition:all 1s ease-in;-webkit-transition:all 1s ease-in;-o-transition:all 1s ease-in;transition:all 1s ease-in;}
    10. .tshop-um-s1 .zui_area .htrans-show{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
    11. .tshop-um-s1 .zui_area:hover .htrans-show{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
    12. .tshop-um-s1 .zui_area .htrans-mt-1{margin-top:-100%;}
    13. .tshop-um-s1 .zui_area:hover .htrans-mt-1,{margin:0px;}
    14. .tshop-um-s1 .zui_area .subpanl .htrans-show{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
    15. .tshop-um-s1 .zui_area .subpanl:hover .htrans-show{opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
    16. .tshop-um-s1 .zui_area .subpanl .htrans-mt-1{margin-top:-100%;}
    17. .tshop-um-s1 .zui_area .subpanl:hover .htrans-mt-1,{margin:0px;}
    18. .tshop-um-s1 .zui_area .trans-duration-03s{transition-duration:0.3s;-moz-transition-duration:0.3s;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;}
    复制代码

    http://shop105630018.taobao.com/?spm=a230r.7195193.1997079397.2.ieLiuU
  • TA的每日心情
    加油
    2015-4-14 08:52
  • 签到天数: 22 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    0

    主题

    34

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    11083

    发表于 2015-5-15 08:49:53 | 显示全部楼层
    本帖最后由 莫非视觉 于 2015-5-15 08:52 编辑

    html部分
    1. <div class="tb-module tshop-um tshop-um-s1" style="">
    2.   <div class="s1" style="margin-left:0px;height:150px;width:990px;">
    3.     <div class="shop-custom abs" style="height:150px;width:1920px;left:-465px;top:0px;">
    4.       <div class="item" style="height:150px;width:1920px;">
    5.         <div class="zui_area">
    6.           <a class="J_TWidget zui s1_3x_pop_0" style="top:0px;left:0px;width:940px;height:150px;background:url(http://gdp.alicdn.com/imgextra/i2/640429433/TB2GwIacpXXXXclXXXXXXXXXXXX_!!640429433.jpg) no-repeat;"></a>
    7.           <a class="J_TWidget zui s1_3x_pop_1" style="top:0px;left:940px;width:74px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i3/640429433/TB2Wwn_cpXXXXX4XpXXXXXXXXXX_!!640429433.jpg) no-repeat;"  target="_blank"></a>
    8.           <a class="J_TWidget zui s1_3x_pop_2" style="top:0px;left:1014px;width:28px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i4/640429433/TB218k9cXXXXXXkXpXXXXXXXXXX_!!640429433.jpg) no-repeat;"></a>
    9.           <a class="J_TWidget zui s1_3x_pop_3" style="top:0px;left:1042px;width:74px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i1/640429433/TB2fm.ccpXXXXbeXXXXXXXXXXXX_!!640429433.jpg) no-repeat;"  target="_blank"></a>
    10.           <a class="J_TWidget zui s1_3x_pop_4" style="top:0px;left:1116px;width:29px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i1/640429433/TB2IGXbcpXXXXXYXXXXXXXXXXXX_!!640429433.jpg) no-repeat;"></a>
    11.           <a class="J_TWidget zui s1_3x_pop_5" style="top:0px;left:1145px;width:96px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i2/640429433/TB2UoT9cpXXXXaKXpXXXXXXXXXX_!!640429433.jpg) no-repeat;"  target="_blank"></a>
    12.           <a class="J_TWidget zui s1_3x_pop_6" style="top:0px;left:1241px;width:28px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i4/640429433/TB2yEo8cXXXXXXZXpXXXXXXXXXX_!!640429433.jpg) no-repeat;"></a>
    13.           <a class="J_TWidget zui s1_3x_pop_7" style="top:0px;left:1269px;width:74px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i4/640429433/TB27bcgcpXXXXXcXXXXXXXXXXXX_!!640429433.jpg) no-repeat;"  target="_blank"></a>
    14.           <a class="J_TWidget zui s1_3x_pop_8" style="top:0px;left:1343px;width:29px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i2/640429433/TB2B0k6cXXXXXbOXpXXXXXXXXXX_!!640429433.jpg) no-repeat;"></a>
    15.           <a class="J_TWidget zui s1_3x_pop_9" style="top:0px;left:1449px;width:48px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i4/640429433/TB274s7cXXXXXbqXpXXXXXXXXXX_!!640429433.jpg) no-repeat;"></a>
    16.           <a class="J_TWidget zui s1_3x_pop_10" style="top:0px;left:1421px;width:28px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i2/640429433/TB2smFacpXXXXX7XXXXXXXXXXXX_!!640429433.jpg) no-repeat;"></a>
    17.           <a class="J_TWidget zui s1_3x_pop_11" style="top:0px;left:1372px;width:49px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i2/640429433/TB2Q0sfcpXXXXXyXXXXXXXXXXXX_!!640429433.jpg) no-repeat;"  target="_blank"></a>
    18.           <a class="J_TWidget zui s1_3x_pop_12" style="top:0px;left:1497px;width:423px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i3/640429433/TB235hbcpXXXXXwXXXXXXXXXXXX_!!640429433.jpg) no-repeat;"></a>
    19.           <a class="J_TWidget zui s1_3x_pop_13" style="top:119px;left:940px;width:980px;height:31px;background:url(http://gdp.alicdn.com/imgextra/i3/640429433/TB2L5A.cXXXXXbWXXXXXXXXXXXX_!!640429433.jpg) no-repeat;"></a>
    20.           <div data-type="attention" class="abs" style="left:1449px;top:0px;text-align:center;">
    21.             <div class="user-header-con" data-attention="" data-qz="关注" data-js="">
    22.               <a  target="_blank" class="j_CollectBrand" data-brandid="90568802" style="width:48px;height:119px;position:relative;padding:0px;background:none;display:inline-block;*display:inline;*zoom:1;"><img src="http://gdp.alicdn.com/imgextra/i3/640429433/TB2jDL6cpXXXXbuXpXXXXXXXXXX_!!640429433.jpg" class="on" align="absmiddle" style="display:inline;"/></a>
    23.             </div>
    24.           </div>
    25.           <div class="abs" data-type="pophtml" style="left:940px;top:0px;width:74px;height:119px;overflow:hidden;">
    26.             <div style="height:100%;" class="subpanl">
    27.               <div data-type="anypop">
    28.                 <a class="zui htrans-show htrans-mt-1 trans-duration-03s anypop_i8q1ceu10" style="top:0px;left:0px;width:74px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i2/640429433/TB2xbsbcpXXXXcaXXXXXXXXXXXX_!!640429433.png) no-repeat 0% 0%;"  target="_blank"></a>
    29.               </div>
    30.             </div>
    31.           </div>
    32.           <div class="abs" data-type="pophtml" style="left:1042px;top:0px;width:74px;height:119px;overflow:hidden;">
    33.             <div style="height:100%;" class="subpanl">
    34.               <div data-type="anypop">
    35.                 <a class="zui htrans-show htrans-mt-1 trans-duration-03s anypop_i8q1csow0" style="top:0px;left:0px;width:74px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i1/640429433/TB2z4MdcpXXXXaVXXXXXXXXXXXX_!!640429433.png) no-repeat 0% 0%;"  target="_blank"></a>
    36.               </div>
    37.             </div>
    38.           </div>
    39.           <div class="abs" data-type="pophtml" style="left:1145px;top:0px;width:96px;height:119px;overflow:hidden;">
    40.             <div style="height:100%;" class="subpanl">
    41.               <div data-type="anypop">
    42.                 <a class="zui htrans-show htrans-mt-1 trans-duration-03s anypop_i8q1d37h0" style="top:0px;left:0px;width:96px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i1/640429433/TB2bD69cpXXXXazXpXXXXXXXXXX_!!640429433.png) no-repeat 0% 0%;"  target="_blank"></a>
    43.               </div>
    44.             </div>
    45.           </div>
    46.           <div class="abs" data-type="pophtml" style="left:1269px;top:0px;width:74px;height:119px;overflow:hidden;">
    47.             <div style="height:100%;" class="subpanl">
    48.               <div data-type="anypop">
    49.                 <a class="zui htrans-show htrans-mt-1 trans-duration-03s anypop_i8q1dgs80" style="top:0px;left:0px;width:74px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i4/640429433/TB2ccv6cpXXXXbYXpXXXXXXXXXX_!!640429433.png) no-repeat 0% 0%;"  target="_blank"></a>
    50.               </div>
    51.             </div>
    52.           </div>
    53.           <div class="abs" data-type="pophtml" style="left:1372px;top:0px;width:49px;height:119px;overflow:hidden;">
    54.             <div style="height:100%;" class="subpanl">
    55.               <div data-type="anypop">
    56.                 <a class="zui htrans-show htrans-mt-1 trans-duration-03s anypop_i8q1dpr20" style="top:0px;left:0px;width:49px;height:119px;background:url(http://gdp.alicdn.com/imgextra/i2/640429433/TB2QhAXcpXXXXcWXXXXXXXXXXXX_!!640429433.png) no-repeat 0% 0%;"  target="_blank"></a>
    57.               </div>
    58.             </div>
    59.           </div>
    60.         </div>
    61.       </div>
    62.     </div>
    63.   </div>
    64. </div>
    复制代码


    http://shop105630018.taobao.com/?spm=a230r.7195193.1997079397.2.ieLiuU
  • TA的每日心情
    大哭
    2015-7-3 13:12
  • 签到天数: 32 天

    连续签到: 1 天

    [LV.5]略有小成

    3

    主题

    20

    帖子

    3518

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3518

    QQ
     楼主| 发表于 2015-5-15 15:34:12 | 显示全部楼层

    大神,我也审查元素找过,找不到css,请问大神,css怎么找阿

    一朝为道万事空,从此相逢是路人
  • TA的每日心情

    2015-8-14 09:15
  • 签到天数: 79 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    25

    帖子

    8905

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    8905

    最佳新人

    发表于 2015-5-16 10:30:50 | 显示全部楼层
    这个是鼠标经过切换图片,

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


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

  • TA的每日心情
    大哭
    2015-7-3 13:12
  • 签到天数: 32 天

    连续签到: 1 天

    [LV.5]略有小成

    3

    主题

    20

    帖子

    3518

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3518

    QQ
     楼主| 发表于 2015-5-17 16:19:26 | 显示全部楼层
    小森森 发表于 2015-5-16 10:30
    这个是鼠标经过切换图片,

    他这个有过度效果的
    一朝为道万事空,从此相逢是路人
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-10 18:52 , Processed in 0.110152 second(s), 17 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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