找回密码
 立即注册

QQ登录

只需一步,快速开始

  • 代码风格:【四图】个性动态图片边框关灯特效代码(含工具)
  • 适用平台:京东 
  • 使用方法:自定义模块
  • 可否做成模板:点击查看定制详情
在线代码生成工具:http://www.jy47.com/portal.php?mod=view&aid=91

效果如图:
999.png


点击查看预览效果

代码如下:

复制代码
  1. <style>
  2. .user_jy47_tp009 .user_floor{
  3. position: relative;
  4. background: none;
  5. }
  6. .user_jy47_tp009 .floor-cot_2 {
  7. height: 300px;
  8. width: 990px;
  9. overflow: hidden;
  10. position: relative;
  11. }
  12. .user_jy47_tp009 .floor-cot_2 a {
  13. display: block;
  14. position: absolute;
  15. overflow: hidden;
  16. }
  17. .user_jy47_tp009 .floor-cot_2 a img {
  18. opacity: 1;
  19. -webkit-transition: all 0.7s;
  20. transition: all 0.7s;
  21. }
  22. .user_jy47_tp009 .floor-cot_2 a .left, .user_jy47_tp009 .floor-cot_2 a .right {
  23. width: 2px;
  24. height: 0px;
  25. background: rgb(255, 255, 0);
  26. position: absolute;
  27. -webkit-transition: all 0.7s;
  28. transition: all 0.7s;
  29. }
  30. .user_jy47_tp009 .floor-cot_2 a:hover .left {
  31. height: 100%;
  32. -webkit-transition: all 0.7s;
  33. transition: all 0.7s;
  34. }
  35. .user_jy47_tp009 .floor-cot_2 a:hover .right {
  36. height: 100%;
  37. -webkit-transition: all 0.7s;
  38. transition: all 0.7s;
  39. }
  40. .user_jy47_tp009 .floor-cot_2 a .top, .user_jy47_tp009 .floor-cot_2 a .bottom {
  41. width: 0px;
  42. height: 2px;
  43. background: rgb(255, 255, 0);
  44. position: absolute;
  45. -webkit-transition: all 0.7s;
  46. transition: all 0.7s;
  47. }
  48. .user_jy47_tp009 .floor-cot_2 a:hover .top {
  49. width: 100%;
  50. -webkit-transition: all 0.7s;
  51. transition: all 0.7s;
  52. }
  53. .user_jy47_tp009 .floor-cot_2 a:hover .bottom {
  54. width: 100%;
  55. -webkit-transition: all 0.7s;
  56. transition: all 0.7s;
  57. }
  58. .user_jy47_tp009 .floor-cot_2:hover img {
  59. opacity: 0.8;
  60. -webkit-transition: all 0.7s;
  61. transition: all 0.7s;
  62. }
  63. .user_jy47_tp009 .floor-cot_2  img:hover {
  64. opacity: 1;
  65. -webkit-transition: all 0.7s;
  66. transition: all 0.7s;
  67. }

  68. </style>
  69. <div class="user_jy47_tp009"origin="1">
  70.         <div class="mc">
  71.                  <a name=""></a><div class="user_floor" style="">
  72. <div class="floor-cot_2" style="height:532px;">
  73.         <a href="http://www.jd.com" target="_blank" style="width:658px;height:531px;top:0px;left:0px;background:#000000;">
  74.                 <img src="http://img11.360buyimg.com/cms/jfs/t211/8/2474334773/224780/569e788c/5418f548Naf027ea0.png" class="" style="background:none;">
  75.                 <span class="left" style="left:0;top:0;background:#eb4b3f;display:block;">
  76.                 </span>
  77.                 <span class="top" style="left:0;top:0;background:#eb4b3f;display:block;">
  78.                 </span>
  79.                 <span class="right" style="right:0;bottom:0;background:#eb4b3f;display:block;">
  80.                 </span>
  81.                 <span class="bottom" style="right:0;bottom:0;background:#eb4b3f;display:block;">
  82.                 </span>
  83.         </a>
  84.         <a href="http://www.jd.com" target="_blank" style="width:328px;height:173px;top:0px;left:662px;background:#000000;">
  85.                 <img src="http://img11.360buyimg.com/cms/jfs/t223/156/2440370590/25076/1e39a082/5418f548N54c54720.png" class="" style="background:none;">
  86.                 <span class="left" style="left:0;top:0;background:#eb4b3f;display:block;">
  87.                 </span>
  88.                 <span class="top" style="left:0;top:0;background:#eb4b3f;display:block;">
  89.                 </span>
  90.                 <span class="right" style="right:0;bottom:0;background:#eb4b3f;display:block;">
  91.                 </span>
  92.                 <span class="bottom" style="right:0;bottom:0;background:#eb4b3f;display:block;">
  93.                 </span>
  94.         </a>
  95.         <a href="http://www.jd.com" target="_blank" style="width:162px;height:355px;top:177px;left:662px;background:#000000;">
  96.                 <img src="http://img11.360buyimg.com/cms/jfs/t331/132/594319121/71312/c909be91/5418f548N666b6cc4.png" class="" style="background:none;">
  97.                 <span class="left" style="left:0;top:0;background:#eb4b3f;display:block;">
  98.                 </span>
  99.                 <span class="top" style="left:0;top:0;background:#eb4b3f;display:block;">
  100.                 </span>
  101.                 <span class="right" style="right:0;bottom:0;background:#eb4b3f;display:block;">
  102.                 </span>
  103.                 <span class="bottom" style="right:0;bottom:0;background:#eb4b3f;display:block;">
  104.                 </span>
  105.         </a>
  106.         <a href="http://www.jd.com" target="_blank" style="width:162px;height:153px;top:177px;left:828px;background:#000000;">
  107.                 <img src="http://img11.360buyimg.com/cms/jfs/t214/52/2472074174/21261/a647a874/5418f548Naa953cb6.png" class="" style="background:none;">
  108.                 <span class="left" style="left:0;top:0;background:#eb4b3f;display:block;">
  109.                 </span>
  110.                 <span class="top" style="left:0;top:0;background:#eb4b3f;display:block;">
  111.                 </span>
  112.                 <span class="right" style="right:0;bottom:0;background:#eb4b3f;display:block;">
  113.                 </span>
  114.                 <span class="bottom" style="right:0;bottom:0;background:#eb4b3f;display:block;">
  115.                 </span>
  116.         </a>
  117.         <a href="http://www.jd.com" target="_blank" style="width:162px;height:198px;top:334px;left:828px;background:#000000;">
  118.                 <img src="http://img11.360buyimg.com/cms/jfs/t325/114/575609194/31927/ca21bc46/5418f548Nba788c37.png" style="background:none;">
  119.                 <span class="left" style="left:0;top:0;background:#eb4b3f;display:block;">
  120.                 </span>
  121.                 <span class="top" style="left:0;top:0;background:#eb4b3f;display:block;">
  122.                 </span>
  123.                 <span class="right" style="right:0;bottom:0;background:#eb4b3f;display:block;">
  124.                 </span>
  125.                 <span class="bottom" style="right:0;bottom:0;background:#eb4b3f;display:block;">
  126.                 </span>
  127.         </a>
  128. </div>
  129. </div>
  130.         </div>
  131. </div>
复制代码





分享至 : QQ空间
收藏

967 个回复

倒序浏览
回复 使用道具 举报
流线型效果很棒
回复 使用道具 举报
哇咔咔这个效果太好了
回复 使用道具 举报
好酷,非常酷!!
回复 使用道具 举报
收~~~~~~~~~~~~~··
回复 使用道具 举报
回复 使用道具 举报
酷炫哦!!!!!
回复 使用道具 举报
这个线条流动效果蛮炫的!
回复 使用道具 举报
大神们  向你们学习
回复 使用道具 举报