• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

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的特效兼容性更好！

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。