最近新做的css3动感DIY模块效果
以下发布的作品，由互联网收集若无意侵犯您了的版权，请您联系我们。
模板名称 : css3动感DIY模块
模板作者 : 风乱流年
语言编码 : Discuz! X2.5 Discuz! X2.0 Discuz! X1.5 Discuz! X3.0/X3.1
适用版本 : GBK简体 UTF8简体 BIG5繁体 UTF8繁体
模板色系 : 红 橙 黄 绿 蓝 紫 黑 灰
操作：
门户-----》模块管理--------》添加
第二步：
代码：命名：1+8图片展示
之后呢，把下面的代码复制到这个红色的框框里面，提交就可以了
调用代码：
<style>
* { padding:0; margin:0 }
ul, li { list-style: none; }
a { color: #333; text-decoration: none; }
.clear { clear: both; }
.photo { margin: 10px auto 0px; width: 980px; }
.photo .pic_d { float: left; height: 210px; width: 200px; position:relative; }
.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; }
.photo .pic_n { float: right; width: 772px; }
.photo .pic_n .pic_div { float: left; width: 183px; margin-left: 10px; margin-bottom: 10px; position:relative; }
.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; }
.test a { color: #FFF; text-decoration: none; }
.test a:hover { color: #FFF; text-decoration: underline; }
.imgft:hover img { opacity: 0.7 ;transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);}
.photo img{transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;}
</style>
<div class="photo">
<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>
<div class="pic_n">
<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>
</div>
<div class="clear"></div>
</div>
前台，DIY---100%框架----帖子模块----1+8-----属性自定义---9图片
选择1+8图片展示即可。
效果如下：
页:
[1]