艺灵设计

全部文章
×

卡迪森灯饰双11首页抛光效果

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2013-11-08 21:41:17 - 阅: - 评:0 - 积分:0

适用范围:京东店铺。(淘宝店铺的话会过滤掉动画)

今天又忙了一天,各种苦逼!!!无力吐槽。。。。。。今天的文章还没有发布,趁这会儿在公司,发篇文章。如下图
卡迪森灯饰首页打光效果
特效说明:鼠标滑过下面几个链接时,产生抛光的效果下面再附上源码,需要的亲直接拷贝走。

 

  1. .footer-more-trigger,.most-footer,.sn-simple-logo{position:absolute;left:auto;top:auto;width:auto;line-height:inherit;padding:0;border:0;}/*重置系统样式,清除边框、填充、背景等其它属性*/
  2. /*抛光特效   艺灵设计*/
  3. img{border:0}
  4. .user-pgtx{}
  5. .user-qp{position:absolute;left: 50%;width: 1920px;height: 100%;margin-left:-960px;text-align:center;}
  6. .user-pgtx a,.user-pgtx span{display:inline-block;}
  7. .user-pgtx .user-po_re{position:relative;width:990px;margin:0 auto;}
  8. .user-pgtx .user-po_re a{position:relative;overflow:hidden;vertical-align:top;}
  9. .user-pgtx .user-po_re a span{position:absolute;display:inline-block;}
  10. .user-pgtx .user-po_re a span{position:absolute;display:inline-block;}
  11. .user-pgtx a span{left:-100%;width:180px;height:68px;background:url(/d/file/css3/2013-11-08/xg4.png) no-repeat left center;}
  12. .user-pgtx a:hover span{-webkit-animation:ans1 .4s ease-out 1;animation:ans1 .4s ease-out 1;}
  13. @-webkit-keyframes ans1{
  14. 0%{-webkit-transform:translateX(0px);}
  15. 100%{-webkit-transform:translateX(400px);}
  16. }
  17. @-moz-keyframes ans1{
  18. 0%{-moz-transform:translateX(0px);}
  19. 100%{-moz-transform:translateX(400px);}
  20. }
  21. @-o-keyframes ans1{
  22. 0%{-o-transform:translateX(0px);}
  23. 100%{-o-transform:translateX(400px);}
  24. }
  25. @-ms-keyframes ans1{
  26. 0%{-ms-transform:translateX(0px);}
  27. 100%{-ms-transform:translateX(400px);}
  28. }
  29. @keyframes ans1{
  30. 0%{transform:translateX(0px);}
  31. 100%{transform:translateX(400px);}
  32. }

 

Demo演示
  1. <div class="user-pgtx" style="height:800px;">
  2. <div class="user-qp">
  3. <a href="/code" target="_blank"><img src="/d/file/css3/2013-11-08/卡迪森banner.jpg"></a>
  4. <div class="user-qp" style="height:68px;top:569px;">
  5. <div class="user-k990ts user-po_re">
  6. <a href="/code/" target="_blank"><img src="/d/file/css3/2013-11-08/a1.png"><span > </span></a>
  7. <a href="/zxsc/" target="_blank"><img src="/d/file/css3/2013-11-08/a2.png"><span> </span></a>
  8. <a href="/div/" target="_blank"><img src="/d/file/css3/2013-11-08/a3.png"><span > </span></a>
  9. <a href="/" target="_blank"><img src="/d/file/css3/2013-11-08/a4.png"><span > </span></a>
  10. <a href="/" target="_blank"><img src="/d/file/css3/2013-11-08/a5.png"><span > </span></a>
  11. </div>
  12. </div>
  13. </div>
  14. </div>

点此下载:→→[淘宝特效]卡迪森灯饰首页打光效果.zip   

店铺预览地址:http://kds.tmall.com/。由于店铺后来是其它美工装修的,原特效已被清除......

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2013-11-08/111.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 双11炫酷特效 遮罩层特效 鼠标滑过特效 特效源码 淘宝店铺特效代码

上一篇: 淘宝c店全屏模板框架   下一篇: 纯css实现多重炫酷背景

评论区