HTML5+CSS3从入门到精通CSS3图文卡片鼠标hover悬停动画特效解析-职坐标

HTML5+CSS3从入门到精通CSS3图文卡片鼠标hover悬停动画特效解析

沉沙 2018-07-09 来源：阅读 1009 评论 0

摘要：这是一款CSS3图文卡片鼠标hover悬停动画特效。该特效在鼠标hover图文卡片时，卡片底部的描述文字板块会向上滑动，显示出这篇文章的简短描述信息。希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

简要教程

这是一款CSS3图文卡片鼠标hover悬停动画特效。该特效在鼠标hover图文卡片时，卡片底部的描述文字板块会向上滑动，显示出这篇文章的简短描述信息。

使用方法

在页面中引入卡片的必要样式文件style.css。

HTML结构

该CSS3图文卡片鼠标hover悬停动画特效的HTML结构如下：

<article class="card">
  <header class="card__thumb">
    <a href="#"><img src="img/1.jpg"/></a>
  </header>
  <date class="card__date">
    <span class="card__date__day">19</span>
    <br/>
    <span class="card__date__month">十月</span>
  </date>
 
  <div class="card__body">
    <div class="card__category"><a href="#">照片</a></div>
    <h2 class="card__title"><a href="#">我们在通往地狱的高速公路上！</a></h2>
    <div class="card__subtitle">本德医生正在煎熬！</div>
    <p class="card__description">正文的详细内容描述，我们在通往地狱的高速公路上，本德医生正在煎熬。正文的详细内容描述，我们在通往地狱的高速公路上，本德医生正在煎熬。我们在通往地狱的高速公路上。</p>
  </div>
 
  <footer class="card__footer">
    <span class="icon ion-clock"></span> 10分钟前
    <span class="icon ion-chatbox"></span><a href="#"> 145 评论</a>
  </footer>
</article>

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！

html5编辑器 web前端开发html5+css3 关于h5的书籍

本文由 @沉沙发布于职坐标。未经许可，禁止转载。