CSS3图文卡片鼠标悬停加载文字动画特效下载

分享 :

网盘下载链接:

提取密码: 2n2z
复制提取密码
这是一款CSS3图文卡片鼠标悬停加载文字动画特效。该特效在鼠标悬停图文卡片时,卡片底部的描述文字板块会向上滑动,显示出这篇文章的简短描述信息。
  • 详情
    文件来源

    网络收集

    更新日期

    2018-01-03

    适用平台

    All

    系统位数

    ALL

    文件格式

    zip

    文件语言

    中文

    文件授权

    免费

    下载次数

    61次

    效果显示

  • 使用说明

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

    <link rel="stylesheet" href="css/style.css">  
    

    HTML结构

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

    <article class="card">
       <header class="card__thumb">
    	<a href="http://www.51rgb.cn/course/page-6.html"><img src="img/1.jpg"/></a>
       </header>
       <date class="card__date">
    	<span class="card__date__day">03</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="http://www.51rgb.cn/course/page-6.html">60天学会前端开发薪水三万</a></h2>
    	<div class="card__subtitle">一位零基础学前端开发的学习总结</div>
    	<p class="card__description">起初我对前端开发是什么都不知道,只知道在学校学习的时候老师用DW软件用表格制作网页。更悲催的是:HTML标签与CSS样式都不会,呜呜~~</p>
       </div>
       <footer class="card__footer">
    	<span class="icon ion-clock"></span> 10分钟前
    	<span class="icon ion-chatbox"></span><a href="#"> 510 评论</a>
       </footer>
    </article>
    
  • 相关下载
在线客服
热线电话

微信公众账号