淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1647|回复: 17
收起左侧

京东的动态Banner特效

[复制链接]
  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51581

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

    QQ
    发表于 2015-12-15 10:11:58 | 显示全部楼层 |阅读模式
    不多说废话  直接上代码   我要当一次雷锋


    1. .user-wrap .user-wrap-bgE{position:absolute;z-index:1;width:100%;height:100%;left:0;top:0;opacity:0}
    2. .user-wrap .user-wrap-bgE img{height:100%;display:block;margin:0 auto}
    3. .user-wrap .user-wrap-bgC01{position:absolute;z-index:2;width:100%;height:100%;left:0;top:0;opacity:0}
    4. .user-wrap .user-wrap-bgC01 img{height:100%;display:block;margin:0 auto}
    5. .user-wrap .user-wrap-bgC02{position:absolute;z-index:2;width:100%;height:100%;left:0;top:0;opacity:0}
    6. .user-wrap .user-wrap-bgC02 img{height:100%;display:block;margin:0 auto}
    7. .user-wrap .user-wrap-bgC03{position:absolute;z-index:2;width:100%;height:100%;left:0;top:0;opacity:0}
    8. .user-wrap .user-wrap-bgC03 img{height:100%;display:block;margin:0 auto}
    9. .user-wrap .user-wrap-lineA{position:absolute;z-index:3;width:100%;height:100%;left:0;top:0;opacity:0}
    10. .user-wrap .user-wrap-lineA img{height:100%;display:block;margin:0 auto}
    11. .user-wrap .user-wrap-lineB{position:absolute;z-index:3;width:100%;height:100%;left:0;top:0;opacity:0}
    12. .user-wrap .user-wrap-lineB img{height:100%;display:block;margin:0 auto}
    13. .user-wrap .user-wrap-lineC{position:absolute;z-index:3;width:100%;height:100%;left:0;top:0;opacity:0}
    14. .user-wrap .user-wrap-lineC img{height:100%;display:block;margin:0 auto}
    15. .user-wrap .user-wrap-bgD{position:absolute;z-index:3;width:100%;height:100%;left:0;top:0;opacity:0}
    16. .user-wrap .user-wrap-bgD img{height:100%;display:block;margin:0 auto}
    17. .user-wrap .user-wrap-bgA{position:absolute;z-index:2;width:100%;height:100%;left:0;top:0;opacity:0}
    18. .user-wrap .user-wrap-bgA img{height:100%;display:block;margin:0 auto}
    19. .user-wrap .user-wrap-zi{position:absolute;z-index:5;width:100%;height:100%;left:0;top:0;opacity:0}
    20. .user-wrap .user-wrap-zi img{height:100%;display:block;margin:0 auto}
    21. .user-wrap .user-wrap-bgE{opacity:1;-webkit-animation:user-fadeIn ease-in .8s .5s both;-moz-animation:user-fadeIn ease-in .8s .5s both;animation:user-fadeIn ease-in .8s .5s both}
    22. .user-wrap .user-wrap-bgE img{-webkit-animation:user-ani_bounceopacity ease-in-out 1.2s 1.5s infinite alternate both;-moz-animation:user-ani_bounceopacity ease-in-out 1.2s 1.5s infinite alternate both;animation:user-ani_bounceopacity ease-in-out 1.2s 1.5s infinite alternate both}
    23. .user-wrap .user-wrap-bgC01{opacity:1}
    24. .user-wrap .user-wrap-bgC02{opacity:1}
    25. .user-wrap .user-wrap-bgC03{opacity:1}
    26. .user-wrap .user-wrap-bgC01 img{-webkit-animation:user-aniShootA linear 6s 4s infinite both;-moz-animation:user-aniShootA linear 6s 4s infinite both;animation:user-aniShootA linear 6s 4s infinite both}
    27. .user-wrap .user-wrap-bgC02 img{-webkit-animation:user-aniShootA linear 6s 2s infinite both;-moz-animation:user-aniShootA linear 6s 2s infinite both;animation:user-aniShootA linear 6s 2s infinite both}
    28. .user-wrap .user-wrap-bgC03 img{-webkit-animation:user-aniShootA linear 6s 0s infinite both;-moz-animation:user-aniShootA linear 6s 0s infinite both;animation:user-aniShootA linear 6s 0s infinite both}
    29. .user-wrap .user-wrap-bgD{-webkit-animation:user-bounceIn ease-in .6s .6s both;-moz-animation:user-bounceIn ease-in .6s .6s both;animation:user-bounceIn ease-in .6s .6s both}
    30. .user-wrap .user-wrap-lineC{-webkit-animation:user-fadeIn ease-in .8s .6s both;-moz-animation:user-fadeIn ease-in .8s .6s both;animation:user-fadeIn ease-in .8s .6s both}
    31. .user-wrap .user-wrap-bgA{-webkit-animation:user-bounceIn ease-in .6s .5s both;-moz-animation:user-bounceIn ease-in .6s .5s both;animation:user-bounceIn ease-in .6s .5s both}
    32. .user-wrap .user-wrap-zi{-webkit-animation:user-bounceIn ease-in .6s .6s both;-moz-animation:user-bounceIn ease-in .6s .6s both;animation:user-bounceIn ease-in .6s .6s both}

    33. @-webkit-keyframes user-bounceIn{0%,20%,40%,60%,80%,100%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
    34. 0%{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale3d(0.3,.3,.3)}
    35. 20%{-webkit-transform:scale3d(1.1,1.1,1.1)}
    36. 40%{-webkit-transform:scale3d(0.9,.9,.9)}
    37. 60%{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale3d(1.03,1.03,1.03)}
    38. 80%{-webkit-transform:scale3d(0.97,.97,.97)}
    39. 100%{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale3d(1,1,1)}}
    40. @-moz-keyframes user-bounceIn{0%,20%,40%,60%,80%,100%{-moz-transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
    41. 0%{opacity:0;filter:alpha(opacity=0);-moz-transform:scale3d(0.3,.3,.3)}
    42. 20%{-moz-transform:scale3d(1.1,1.1,1.1)}
    43. 40%{-moz-transform:scale3d(0.9,.9,.9)}
    44. 60%{opacity:1;filter:alpha(opacity=100);-moz-transform:scale3d(1.03,1.03,1.03)}
    45. 80%{-moz-transform:scale3d(0.97,.97,.97)}
    46. 100%{opacity:1;filter:alpha(opacity=100);-moz-transform:scale3d(1,1,1)}}
    47. @-o-keyframes user-bounceIn{0%,20%,40%,60%,80%,100%{-o-transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
    48. 0%{opacity:0;filter:alpha(opacity=0);-o-transform:scale3d(0.3,.3,.3)}
    49. 20%{-o-transform:scale3d(1.1,1.1,1.1)}
    50. 40%{-o-transform:scale3d(0.9,.9,.9)}
    51. 60%{opacity:1;filter:alpha(opacity=100);-o-transform:scale3d(1.03,1.03,1.03)}
    52. 80%{-o-transform:scale3d(0.97,.97,.97)}
    53. 100%{opacity:1;filter:alpha(opacity=100);-o-transform:scale3d(1,1,1)}}
    54. @keyframes user-bounceIn{0%,20%,40%,60%,80%,100%{transition-timing-function:cubic-bezier(0.215,.61,.355,1)}
    55. 0%{opacity:0;filter:alpha(opacity=0);transform:scale3d(0.3,.3,.3)}
    56. 20%{transform:scale3d(1.1,1.1,1.1)}
    57. 40%{transform:scale3d(0.9,.9,.9)}
    58. 60%{opacity:1;filter:alpha(opacity=100);transform:scale3d(1.03,1.03,1.03)}
    59. 80%{transform:scale3d(0.97,.97,.97)}100%{opacity:1;filter:alpha(opacity=100);transform:scale3d(1,1,1)}}
    60. @-webkit-keyframes user-fadeIn{0%{opacity:0;filter:alpha(opacity=0);-webkit-transform:translate3d(0,0,0)}100%{opacity:1;filter:alpha(opacity=100);-webkit-transform:none}}
    61. @-moz-keyframes user-fadeIn{0%{opacity:0;filter:alpha(opacity=0);-moz-transform:translate3d(0,0,0)}100%{opacity:1;filter:alpha(opacity=100);-moz-transform:none}}
    62. @-o-keyframes user-fadeIn{0%{opacity:0;filter:alpha(opacity=0);-o-transform:translate3d(0,0,0)}100%{opacity:1;filter:alpha(opacity=100);-o-transform:none}}
    63. @keyframes user-fadeIn{0%{opacity:0;filter:alpha(opacity=0);transform:translate3d(0,0,0)}100%{opacity:1;filter:alpha(opacity=100);transform:none}}
    64. @-webkit-keyframes user-aniShootA{0%{opacity:0;-webkit-transform:scale(0)}50%{opacity:.9;-webkit-transform:scale(0.55)}100%{opacity:0;-webkit-transform:scale(1.1)}}
    65. @-moz-keyframes user-aniShootA{0%{opacity:0;-moz-transform:scale(0)}50%{opacity:.9;-moz-transform:scale(0.55)}100%{opacity:0;-moz-transform:scale(1.1)}}
    66. @-o-keyframes user-aniShootA{0%{opacity:0;-o-transform:scale(0)}50%{opacity:.9;-o-transform:scale(0.55)}100%{opacity:0;-o-transform:scale(1.1)}}
    67. @keyframes user-aniShootA{0%{opacity:0;transform:scale(0)}50%{opacity:.9;transform:scale(0.55)}100%{opacity:0;transform:scale(1.1)}}
    68. @-webkit-keyframes user-ani_bounceopacity{0%,100%{opacity:.2}35%{opacity:1}}
    69. @-moz-keyframes user-ani_bounceopacity{0%,100%{opacity:.2}35%{opacity:1}}
    70. @-o-keyframes user-ani_bounceopacity{0%,100%{opacity:.2}35%{opacity:1}}
    71. @keyframes user-ani_bounceopacity{0%,100%{opacity:.2}35%{opacity:1}}


    1. <div class="user-wrap" style="z-index: 5; transform: rotateX(0deg) translate3d(0px, 0px, 0px);-moz-transform: rotateX(0deg) translate3d(0px, 0px, 0px);-webkit-transform: rotateX(0deg) translate3d(0px, 0px, 0px);">  
    2.   <div class="user-wrap-bg">   
    3.     <img src="http://img10.360buyimg.com/cms/jfs/t1885/89/1628417073/158095/434ad41e/566e330dN8a244e70.jpg" alt="" class="user-big-bg" />  
    4.   </div>  
    5.   <div class="user-wrap-bgE">   
    6.     <img src="http://img11.360buyimg.com/cms/jfs/t1924/248/1741657422/295071/4e7ba3fc/566e3311Na6ff3319.jpg" alt="" class="user-big-bg" />  
    7.   </div>  
    8.   <div class="user-wrap-bgC01">   
    9.     <img src="http://img14.360buyimg.com/cms/jfs/t2416/50/1625790367/18584/52e21def/566e3323Naa6c855c.png" alt=""/>  
    10.   </div>  
    11.   <div class="user-wrap-bgC02">   
    12.     <img src="http://img14.360buyimg.com/cms/jfs/t2416/50/1625790367/18584/52e21def/566e3323Naa6c855c.png" alt=""/>  
    13.   </div>  
    14.   <div class="user-wrap-bgC03">   
    15.     <img src="http://img14.360buyimg.com/cms/jfs/t2416/50/1625790367/18584/52e21def/566e3323Naa6c855c.png" alt=""/>  
    16.   </div>  
    17.   <div class="user-wrap-lineC">   
    18.     <img src="http://img10.360buyimg.com/cms/jfs/t2272/131/1592688735/209303/e86fef0b/566e331dN1b3d9586.png" alt="" class="user-big-bg" />  
    19.   </div>  
    20.   <div class="user-wrap-bgD">   
    21.     <img src="http://img13.360buyimg.com/cms/jfs/t2470/43/1668976817/47639/64847c95/566e51e0N90c520bb.png" alt="" />  
    22.   </div>  
    23.   <div class="user-wrap-bgA">   
    24.     <img src="http://img13.360buyimg.com/cms/jfs/t2230/124/1642063818/193285/6e972691/566e51e6Nf2a83d40.png" alt="" />  
    25.   </div>  
    26.   <div class="user-wrap-zi">   
    27.     <img src="http://img14.360buyimg.com/cms/jfs/t2329/68/1691376032/105390/bdf01a0f/566e3320N7ac41414.png" alt="" />  
    28.   </div>
    29. </div>




    吐槽一下京东的狗血编辑器,非得加什么user


    把图片地址替换成自己的 就可以直接用了   


    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51581

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

    QQ
     楼主| 发表于 2015-12-15 10:13:11 | 显示全部楼层
    我自己抢个二楼
    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情
    吐舌头
    2016-11-10 13:55
  • 签到天数: 251 天

    连续签到: 1 天

    [LV.8]自成一派

    3

    主题

    346

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    53969

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

    发表于 2015-12-15 10:30:52 | 显示全部楼层
    有效果图或者链接吗。。

    PS美工交流群  283995557
  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51581

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

    QQ
     楼主| 发表于 2015-12-15 10:39:43 | 显示全部楼层
    图有点大.

    GIF.gif
    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51581

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

    QQ
     楼主| 发表于 2015-12-15 10:40:45 | 显示全部楼层
    苏果 发表于 2015-12-15 10:30
    有效果图或者链接吗。。

    楼下上图

    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情
    无奈
    昨天 10:58
  • 签到天数: 439 天

    连续签到: 1 天

    [LV.9]已臻大成

    28

    主题

    2010

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14229

    最佳新人热心会员活跃会员优秀版主灌水之王

    发表于 2015-12-15 11:13:32 | 显示全部楼层
    雷锋去的有点早,别当了

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


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

  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51581

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

    QQ
     楼主| 发表于 2015-12-15 11:24:24 | 显示全部楼层
    淘小景 发表于 2015-12-15 11:13
    雷锋去的有点早,别当了

    你这样不好

    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情
    臭美
    6 天前
  • 签到天数: 340 天

    连续签到: 1 天

    [LV.8]自成一派

    11

    主题

    466

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    52265

    最佳新人热心会员

    发表于 2015-12-15 11:37:24 | 显示全部楼层
    没上个预览图
  • TA的每日心情
    加油
    2016-2-13 18:29
  • 签到天数: 49 天

    连续签到: 1 天

    [LV.5]略有小成

    5

    主题

    343

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31947

    发表于 2015-12-15 12:26:56 | 显示全部楼层
    666666         
    风太大,你说什么听不见
  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51581

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

    QQ
     楼主| 发表于 2015-12-15 13:28:38 | 显示全部楼层

    上面不是放了么
    愿余生有人鲜衣怒马,陪你看烈焰繁花。
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-9 23:41 , Processed in 0.120478 second(s), 21 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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