合元网络
标题:
图片各种动态效果N多
[打印本页]
作者:
admin
时间:
2018-4-7
标题:
图片各种动态效果N多
<div class="module cl ml">
<ul>
[loop]
<li style="width: 270px; margin: 10px;">
<div class="full-length">
<div class="container">
<ul>
<div class="port-8 effect-2">
<div class="image-box">
<a href="{url}"{target}><img style="border:1px solid #eee; " src="{pic}" width="260px" height="200px" alt="{title}" /></a>
</div>
<div class="text-desc">
<p style="margin: 90px 0px 10px;"><strong><a href="{url}" title="{title}"{target}><font size="3">{title}</font></a></strong></p>
<a href="{url}" class="btn">立即查看</a> </div>
</div>
</ul>
</div>
</div>
</li>
[/loop]
</ul>
</div>
复制代码
<div class="module cl ml">
<ul>
[loop]
<li style="background: #F5F5F5; width: 215px; margin: 10px; border: 1px solid #ECECEC;">
<div class="full-length">
<div class="container">
<ul>
<div class="port-4 effect-1">
<div class="image-box">
<a href="{url}"{target}><img style="border:1px solid #eee; " src="{pic}" width="215px" height="180px" alt="{title}" /></a>
</div>
<div class="text-desc">
<p style="margin: 0px 0px 10px;"><strong><a href="{url}" title="{title}"{target}><font size="3">{title}</font></a></strong></p>
<a href="{url}" class="btn">立即查看</a> </div>
</div>
</ul>
</div>
</div>
<p style="margin: 90px 0px 10px;"><a href="{url}" title="{title}"{target}><font size="2">{title}</font></a></p>
</li>
[/loop]
</ul>
</div>
复制代码
.full-length{width: 100%; float: left; padding-bottom: 0px; }
.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; }
.btn:hover{background-color: transparent; color: #4d92d9; transition: 0.4s;}
.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; }
.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;}
.port-4.effect-1 img{transition: 0.5s; transform: rotateY(360deg) scale(1, 1);}
.port-4.effect-1 .text-desc{transform: rotateY(0deg) scale(0, 0); transition: 0.5s; opacity: 0; padding: 45px 20px 20px;}
.port-4.effect-1:hover .text-desc{transform: rotateY(360deg) scale(1, 1); opacity: 1;}
.port-4.effect-1:hover img{transform: rotateY(0deg) scale(0, 0);}
.port-8{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; overflow: hidden;}
.port-8 .text-desc{opacity: 0; transition: 0.5s; color: #000; }
.port-8.effect-1 img{transition: 0.5s;}
.port-8.effect-1:hover img{transform: scale(1.1);}
.port-8.effect-1 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0); backface-visibility: hidden;}
.port-8.effect-1:hover .text-desc{opacity: 1; transform: scale(1); border-radius: 20%;}
.port-8.effect-2 img{transition: 0.5s;}
.port-8.effect-2:hover img{transform: scale(1.1);}
.port-8.effect-2 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0); backface-visibility: hidden;}
.port-8.effect-2:hover .text-desc{opacity: 1; transform: scale(1); border-radius: 50% 0 50% 0;}
.port-8.effect-2 img{transition: 0.5s;}
.port-8.effect-2:hover img{transform: scale(1.1);}
.port-8.effect-2 .text-desc{left: 0; position: absolute; top: 0; width: 100%; height: 100%; transform: scale(0); backface-visibility: hidden;}
.port-8.effect-2:hover .text-desc{opacity: 0.9; transform: scale(1); border-radius: 60% 0 60% 0;}
复制代码
欢迎光临 合元网络 (http://heyuan18.com/)
Powered by Discuz! X3.2