设为首页 收藏本站
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

[图片特效] 京东618官方页面服饰专场底部导购特效代码分享

4 2354
  • 代码风格:京东618官方页面服饰专场底部导购特效代码分享
  • 适用平台:京东 
  • 使用方法:自定义模块
  • 可否做成模板:否点击查看定制详情

京东618官方页面服饰专场底部导购特效代码分享


代码如下:


  1. <style>.user_jy47-yh-more{ width:1000px;margin-right:-10px; overflow:hidden; position:relative; font-family:"microsoft yahei";}
  2. .user_jy47-yh-more>li{ position:relative; overflow:hidden; margin:10px 10px 0px 0px; -webkit-transition:all 0.5s; transition:all 0.5s; overflow:hidden; float:left;height:240px;}


  3. .user_jy47-yh-more>li>a{ position:absolute;width:100%;height:240px;top:0;left:0;}


  4. .user_jy47-yh-more>li>span{ width:67px;height:0px;position:absolute; line-height:16px;color:#fff;  bottom:0px; right:0px;font-size:16px;  opacity:0;-webkit-transition:all 0.3s; transition:all 0.3s; text-align:center;padding-top:7px; }
  5. .user_jy47-yh-more>li>span em{width:17px;height:12px; position:absolute; right:24px;bottom:12px; animation:shake2 1s infinite;-webkit-animation:shake2 1s infinite;background-image:url(//img11.360buyimg.com/cms/jfs/t2842/221/2102348511/1187/26d03bb9/5757b3c7Nfc9c2689.png);}

  6. .user_jy47-yh-more>li:hover>span{opacity:1;height:60px;}




  7. @keyframes shake2
  8. {
  9. 0% { transform:translateY(-30%); opacity:0.6}
  10. 50% { transform:translateY(0); opacity:1;}
  11. 100% {transform:translateY(30%); opacity:.6}
  12. }
  13. @-webkit-keyframes shake2
  14. {
  15. 0% {-webkit-transform:translateY(-30%); transform:translateY(-30%); opacity:0.6}
  16. 50% { -webkit-transform:translateY(0);transform:translateY(0); opacity:1;}
  17. 100% {-webkit-transform:translateY(30%);transform:translateY(30%); opacity:.6}
  18. }</style>
  19. <ul class="user_jy47-yh-more">  
  20.         <li>
  21.                 <img src="//img10.360buyimg.com/cms/jfs/t2911/34/381025517/19997/20f34f69/57578da5N3a5af840.jpg" alt="" ks_mark="y" /><span style="background:#7030e0;">点击<br />
  22.                 查看<em></em></span><a href="//sale.jd.com/act/oatvOk3YIy2qi.html" target="_blank" clstag="sale|keycount|12334486|1"></a>
  23.         </li>  
  24.         <li>
  25.                 <img src="//img10.360buyimg.com/cms/jfs/t2644/20/2083446848/20632/1942b9dc/57578da5Nd6aea835.jpg" alt="" ks_mark="y" /><span style="background:#d81e87;">点击<br />
  26.                 查看<em></em></span><a href="//sale.jd.com/act/D5pO4rdbShnZ.html" target="_blank" clstag="sale|keycount|12334486|2"></a>
  27.         </li>  
  28.         <li>
  29.                 <img src="//img20.360buyimg.com/cms/jfs/t2926/354/389337165/22201/88b0ea21/57578da5Nc487d0a5.jpg" alt="" ks_mark="y" /><span style="background:#2293d6;">点击<br />
  30.                 查看<em></em></span><a href="//sale.jd.com/act/vPc4g0xW6oQwKZ7.html" target="_blank" clstag="sale|keycount|12334486|3"></a>
  31.         </li>  
  32.         <li>
  33.                 <img src="//img11.360buyimg.com/cms/jfs/t2614/27/2091714048/15190/cad2a4a6/5757b72aN2bb184d4.jpg" alt="" ks_mark="y" /><span style="background:#fdb901;">点击<br />
  34.                 查看<em></em></span><a href="//sale.jd.com/act/pQkEgjG2TrF.html?cpdad=1DLSUE&" target="_blank" clstag="sale|keycount|12334486|4"></a>
  35.         </li>  
  36.         <li>
  37.                 <img src="//img11.360buyimg.com/cms/jfs/t2593/136/2078555744/19934/cb8c37df/57578da5N7781bfff.jpg" alt="" ks_mark="y" /><span style="background:#f33838;">点击<br />
  38.                 查看<em></em></span><a href="//sale.jd.com/act/Ne8odkGzjTEsV.html?cpdad=1DLSUE&" target="_blank" clstag="sale|keycount|12334486|5"></a>
  39.         </li>  
  40.         <li>
  41.                 <img src="//img10.360buyimg.com/cms/jfs/t2881/22/2082097419/17366/f3d8ed71/57578da5N229a7ec9.jpg" alt="" ks_mark="y" /><span style="background:#22c64d;">点击<br />
  42.                 查看<em></em></span><a href="//sale.jd.com/act/idXYpfHZMcvwCP.html?cpdad=1DLSUE&" target="_blank" clstag="sale|keycount|12334486|6"></a>
  43.         </li>  
  44.         <li>
  45.                 <img src="//img13.360buyimg.com/cms/jfs/t2599/121/2076612840/18517/c3e7e85d/57578da5N26db6f67.jpg" alt="" ks_mark="y" /><span style="background:#bb33f5;">点击<br />
  46.                 查看<em></em></span><a href="//faner.jd.com/index.do" target="_blank" clstag="sale|keycount|12334486|7"></a>
  47.         </li>
  48. </ul>
复制代码


装修技术交流①群:326680981(即将满员)②群385402321 ③群170254880
回复

使用道具 举报

签到天数: 1 天

[LV.1]初来乍到

发表于 2016-8-1 11:29:16 | 显示全部楼层

很好,喜欢,感谢分享~
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2016-9-26 09:10:01 | 显示全部楼层
6666666666666666
回复 支持 反对

使用道具 举报

该用户从未签到

发表于 2016-10-9 08:57:53 | 显示全部楼层
777777777777777
回复 支持 反对

使用道具 举报

签到天数: 1 天

[LV.1]初来乍到

发表于 2016-12-14 10:18:33 | 显示全部楼层
收下了多谢了
回复 支持 反对

使用道具 举报

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

本版积分规则

最新活动

新品速递

  • 【店招】带轮播搜索的白色简洁店招代码分享
  • 锚点教程,实现页面内的跳转,淘宝天猫京东
  • 【10图】990十图遮罩开关灯表格布局京东特
  • 【轮播】京东海尔旗舰店创意轮播代码分享
  • 【1920轮播】全屏简洁全屏轮播代码分享

新人课堂

小黑屋|手机版|Archiver|
©2015  建缘设计. All rights reserved. ( 冀ICP备13015006号 )  Powered by Discuz X3.2  技术支持:建缘设计  
快速回复 返回顶部 返回列表