最近新做的css3 动感模块效果。支持所有dz版本。

效果：展示：http://www.qzxyh.com/forum.php



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


第二步：





代码：命名：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图片展示即可。

这个不错，感谢分享！http://www.xinyang.la

谢谢分享

不错 支持下

http://www.sj77.com

支持下