最近新做的css3動(dòng)感DIY模塊效果

quanshiyinian

以下發(fā)布的作品，由互聯(lián)網(wǎng)收集若無(wú)意侵犯您了的版權(quán)，請(qǐng)您聯(lián)系我們。

模板名稱 : css3動(dòng)感DIY模塊

模板作者 : 風(fēng)亂流年

語(yǔ)言編碼 : discuz! X2.5 Discuz! X2.0 Discuz! X1.5 Discuz! X3.0/X3.1

適用版本 : GBK簡(jiǎn)體 UTF8簡(jiǎn)體 BIG5繁體 UTF8繁體

模板色系 : 紅 橙 黃 綠 藍(lán) 紫 黑 灰

操作：
門戶-----》模塊管理--------》添加
第二步：

代碼：命名：1+8圖片展示
之后呢，把下面的代碼復(fù)制到這個(gè)紅色的框框里面，提交就可以了

1. 調(diào)用代碼：
   
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>
    

復(fù)制代碼

前臺(tái)，DIY---100%框架----帖子模塊----1+8-----屬性自定義---9圖片
選擇1+8圖片展示即可。
效果如下：

道勤主機(jī)提供365天*24小時(shí)全年全天無(wú)休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過(guò)程中所遇到的一切問(wèn)題! 如果您是道勤主機(jī)用戶，那么您可以通過(guò)QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒(méi)問(wèn)題，點(diǎn)擊頁(yè)面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購(gòu)買后，我們?yōu)槟�免費(fèi)進(jìn)行無(wú)縫搬家服務(wù)，讓您享受網(wǎng)站零訪問(wèn)延遲的遷移到道勤主機(jī)的服務(wù)！