纯CSS的图文消息卡片

一款纯CSS的图文消息卡片，两种不同的风格，但都有鼠标悬停文字展开收缩的效果，配合文字显示的小图标也是比较有个性的哦，整体的样式风格还是挺棒的，喜欢的童鞋请收下吧。

分类：图片代码 > 鼠标滑过难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需远程调用font-awesome图标字体库，并引入本地的CSS样式文件，代码如下：

<link rel='stylesheet prefetch' href='http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，按照卡片的个数分为两大块，分别用了不同class的div作为容器，代码如下：

<div class="row">
  <div class="example-1 card">
    <div class="wrapper">
      <div class="date">
        <span class="year">2016</span>
        <span class="month">8月</span>
        <span class="day">12</span>
      </div>
      <div class="data">
        <div class="content">
          <span class="author">秘密——吸引力法则</span>
          <h1 class="title"><a href="#">你所拥有的一切都是你吸引而来的！</a></h1>
          <p class="text">宇宙喜欢快速行动，不要拖延，不要猜测，立即行动！</p>
          <label for="show-menu" class="menu-button"><span></span></label>
        </div>
        <input type="checkbox" id="show-menu" />
        <ul class="menu-content">
          <li>
            <a href="#" class="fa fa-bookmark-o"></a>
          </li>
          <li><a href="#" class="fa fa-heart-o"><span>47</span></a></li>
          <li><a href="#" class="fa fa-comment-o"><span>8</span></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="example-2 card">
    <div class="wrapper">
      <div class="header">
        <div class="date">
          <span class="year">2016</span>
          <span class="month">8月</span>
          <span class="day">12</span>
        </div>
        <ul class="menu-content">
          <li>
            <a href="#" class="fa fa-bookmark-o"></a>
          </li>
          <li><a href="#" class="fa fa-heart-o"><span>18</span></a></li>
          <li><a href="#" class="fa fa-comment-o"><span>3</span></a></li>
        </ul>
      </div>
      <div class="data">
        <div class="content">
          <span class="author">秘密——吸引力法则</span>
          <h1 class="title"><a href="#">你所拥有的一切都是你吸引而来的！</a></h1>
          <p class="text">一旦你真正主宰你的思想和感觉，你就是你自己现实的创造者！ </p>
          <a href="#" class="button">阅读更多</a>
        </div>
      </div>
    </div>
  </div>
</div>