最近新做的css3动感DIY模块效果

quanshiyinian

以下发布的作品，由互联网收集若无意侵犯您了的版权，请您联系我们。

模板名称 : css3动感DIY模块

模板作者 : 风乱流年

语言编码 : discuz! X2.5 Discuz! X2.0 Discuz! X1.5 Discuz! X3.0/X3.1

适用版本 : GBK简体 UTF8简体 BIG5繁体 UTF8繁体

模板色系 : 红 橙 黄 绿 蓝 紫 黑 灰

操作：
门户-----》模块管理--------》添加
第二步：

代码：命名：1+8图片展示
之后呢，把下面的代码复制到这个红色的框框里面，提交就可以了

1. 调用代码：
   
2. <style>
   
3. * { padding:0; margin:0 }
   
4. ul, li { list-style: none; }
   
5. a { color: #333; text-decoration: none; }
   
6. .clear { clear: both; }
   
7. .photo { margin: 10px auto 0px; width: 980px; }
   
8. .photo .pic_d { float: left; height: 210px; width: 200px; position:relative; }
   
9. .pic_d .test { position: absolute; width: 210px; height:30px; font-size: 13px; line-height: 30px; text-align: center; top:180px; background: #000000; color: #FFFFFF; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; }
   
10. .photo .pic_n { float: right; width: 772px; }
    
11. .photo .pic_n .pic_div { float: left; width: 183px; margin-left: 10px; margin-bottom: 10px; position:relative; }
    
12. .photo .pic_n .test { position: absolute; width: 183px; height:30px; font-size: 13px; line-height: 30px; text-align: center; top:70px; background: #000000; color: #FFFFFF; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; }
    
13. .test a { color: #FFF; text-decoration: none; }
    
14. .test a:hover { color: #FFF; text-decoration: underline; }
    
15. .imgft:hover img { opacity: 0.7 ;transform: rotate(360deg);
    
16. -webkit-transform: rotate(360deg);
    
17. -moz-transform: rotate(360deg);
    
18. -o-transform: rotate(360deg);
    
19. -ms-transform: rotate(360deg);}
    
20. .photo img{transition: All 0.4s ease-in-out;
    
21. -webkit-transition: All 0.4s ease-in-out;
    
22. -moz-transition: All 0.4s ease-in-out;
    
23. -o-transition: All 0.4s ease-in-out;}
    
24. </style>
    
25. 
    
26. <div class="photo">
    
27. [index=1]
    
28. <div class="pic_d"><span class="test"><a href="{url}">{title}</a></span><a href="{url}"  class="imgft"><img src="{pic}" width="210" height="210" border="0" /></a></div>
    
29. [/index]
    
30.   
    
31. 
    
32.   <div class="pic_n">
    
33. [loop]  
    
34.    <div class="pic_div"><span class="test"><a href="{url}">{title}</a></span><a href="{url}"  class="imgft"><img src="{pic}" width="183" height="100" border="0"  /></a></div>
    
35. [/loop]
    
36.   </div>
    
37.   <div class="clear"></div>
    
38. </div>
    

复制代码

前台，DIY---100%框架----帖子模块----1+8-----属性自定义---9图片
选择1+8图片展示即可。
效果如下：

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！