CSS3图文卡片鼠标hover悬停动画特效

当前位置:主页 > CSS3库 > CSS3动画 > CSS3图文卡片鼠标hover悬停动画特效
CSS3图文卡片鼠标hover悬停动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-10-19
    阅读:
简要教程

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

使用方法

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

<link rel="stylesheet" href="css/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>
                

网友评论