默认版块

您所在的位置:合元网络»|||默认版块222222论坛 代码学习 默认版块 图片各种动态效果N多  

图片各种动态效果N多

查看: 1275 发表于 2018-4-7 15:19:35 [复制链接]
  1. <div class="module cl ml">
  2. <ul>
  3. [loop]
  4. <li style="width: 270px; margin: 10px;">
  5.                 <div class="full-length">
  6.                     <div class="container">
  7.                         <ul>
  8.                                     <div class="port-8 effect-2">
  9.                                         <div class="image-box">
  10.                                             <a href="{url}"{target}><img style="border:1px solid #eee; " src="{pic}" width="260px" height="200px" alt="{title}" /></a>
  11.                                     </div>
  12.                                     <div class="text-desc">
  13.                                         <p  style="margin: 90px 0px 10px;"><strong><a href="{url}" title="{title}"{target}><font size="3">{title}</font></a></strong></p>
  14.                                             <a href="{url}" class="btn">立即查看</a>                                    </div>
  15.                                 </div>
  16.                         </ul>
  17.                     </div>
  18.                 </div>
  19. </li>        
  20. [/loop]
  21. </ul>
  22. </div>
复制代码

  1. <div class="module cl ml">
  2. <ul>
  3. [loop]
  4. <li style="background: #F5F5F5; width: 215px; margin: 10px; border: 1px solid #ECECEC;">
  5.                 <div class="full-length">
  6.                     <div class="container">
  7.                         <ul>
  8.                                     <div class="port-4 effect-1">
  9.                                         <div class="image-box">
  10.                                             <a href="{url}"{target}><img style="border:1px solid #eee; " src="{pic}" width="215px" height="180px" alt="{title}" /></a>
  11.                                     </div>
  12.                                     <div class="text-desc">
  13.                                         <p  style="margin: 0px 0px 10px;"><strong><a href="{url}" title="{title}"{target}><font size="3">{title}</font></a></strong></p>
  14.                                             <a href="{url}" class="btn">立即查看</a>                                    </div>
  15.                                 </div>
  16.                         </ul>
  17.                     </div>
  18.                 </div>
  19. <p  style="margin: 90px 0px 10px;"><a href="{url}" title="{title}"{target}><font size="2">{title}</font></a></p>
  20. </li>        
  21. [/loop]
  22. </ul>
  23. </div>
复制代码

  1. .full-length{width: 100%; float: left; padding-bottom: 0px; }
  2. .btn{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #4d92d9; background-color: #4d92d9; text-decoration: none; transition: 0.4s; }
  3. .btn:hover{background-color: transparent; color: #4d92d9; transition: 0.4s;}
  4. .text-desc{position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 100%; padding: 20px;margin: 0; padding: 0; box-sizing: border-box; }


  5. .port-4{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); z-index: 10;}

  6. .port-4.effect-1 img{transition: 0.5s; transform: rotateY(360deg) scale(1, 1);}
  7. .port-4.effect-1 .text-desc{transform: rotateY(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
  8. .port-4.effect-1:hover .text-desc{transform: rotateY(360deg) scale(1, 1);  opacity: 1;}
  9. .port-4.effect-1:hover img{transform: rotateY(0deg) scale(0, 0);}


  10. .port-8{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; overflow: hidden;}
  11. .port-8 .text-desc{opacity: 0; transition: 0.5s; color: #000; }

  12. .port-8.effect-1 img{transition: 0.5s;}
  13. .port-8.effect-1:hover img{transform: scale(1.1);}
  14. .port-8.effect-1 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0);  backface-visibility: hidden;}
  15. .port-8.effect-1:hover .text-desc{opacity: 1; transform: scale(1); border-radius: 20%;}

  16. .port-8.effect-2 img{transition: 0.5s;}
  17. .port-8.effect-2:hover img{transform: scale(1.1);}
  18. .port-8.effect-2 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0);  backface-visibility: hidden;}
  19. .port-8.effect-2:hover .text-desc{opacity: 1; transform: scale(1); border-radius: 50% 0 50% 0;}

  20. .port-8.effect-2 img{transition: 0.5s;}
  21. .port-8.effect-2:hover img{transform: scale(1.1);}
  22. .port-8.effect-2 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0);  backface-visibility: hidden;}
  23. .port-8.effect-2:hover .text-desc{opacity: 0.9; transform: scale(1); border-radius: 60% 0 60% 0;}
复制代码


— 产品中心

PRODUCT CENTER

— 产品中心

PRODUCT CENTER

CopyRight 2012-2017 合元网络 版权所有
公司地址:郑州市高新区升龙又一城A区2号楼2单元17楼 热线电话:15303843903 豫ICP备14027215号
快速回复 返回列表