CSS 图片触发显示特效,线条动态

admin 3周前 78浏览 0评论

 图片上线条特效.gif CSS 图片触发显示特效,线条动态 CSS学习

前两天接了一个zblog主题定制,其中分类列表中的图片都需要如上图的特效,在鼠标触发文章缩略图时候,会悬浮显示一层特效,线条动态显示,下面记录下这段HTML和CSS:

首先是HTML:

<div class="list">
<ul>
<li>
<div class="img">
  <a href="{$article.Url}">
   <img src="{yddz_thumbnail($article)" alt="{$article.Title}">
   <div class="img_active"></div>
   <p>MORE EXCITING</p>
  </a>
 </div>
</li>
</ul>
</div>

 CSS:

.list li{padding-bottom: 17px;width: 100%;height: auto;padding-bottom: 17px;margin-top: 17px;border-bottom: 1px solid #E5E5E5;overflow: hidden;}

.list .img{float: left;width: 220px;height: 150px;line-height: 150px;background: #68838B; overflow: hidden;position: relative;}

.list .img img{width: 100%;height: 100%;object-fit: cover;overflow: hidden;}

.list .img:hover img{opacity: 0.8;}

.list .img .img_active{width: 100%;height: 100%;position: absolute;top: 0;left: 0;

 -webkit-backface-visibility: hidden;backface-visibility: hidden;

 color: #fff;font-size: 1.26em;text-transform: uppercase;}

.list .img .img_active::before, .list .img .img_active::after {

 position: absolute;top: 20px;bottom: 20px;left: 20px;right: 20px;

 content: '';opacity: 0;pointer-events: none;

 -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}

.list .img .img_active::before {

 border-top: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: scale(0, 1);transform: scale(0, 1);}

.list .img .img_active::after {

 border-left: 1px solid #fff;border-right: 1px solid #fff;-webkit-transform: scale(1, 0);transform: scale(1, 0);}

.list .img:hover .img_active::before, .list .img:hover .img_active::after {

 -webkit-transform: scale(1);transform: scale(1);opacity: 1;}

.list .img p{ display: none; position: absolute;left: 0;top: 0;right: 0;bottom: 0;text-align: center;vertical-align: middle;color: #fff;font-size: 18px;}

.list .img:hover p{display: block;}

这种特效目前在网络上很多,都可以直接搜到,很多使用jquery的特效兼容性更好!

评论