1、前几天看到Hexo的next主题标题hover效果很炫,自己尝试写了一个,另一个是next的实现,照例先上图

  

2、实现小黑科技

<div>
<a href="javascript:void(0);" class="demo1">自己实现的hover效果</a>
</div>
.demo1{
position: relative;
text-decoration: none;
font-size: 20px;
color: #333;
}
.demo1:before{
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width:;
height: 2px;
background: #4285f4;
transition: all .3s;
}
.demo1:hover:before{
width: 100%;
left:;
right:;
}

关键在于没有hover的时候定义width为0,这样可以实现宽度从0到100%的变化。

left为50%,目的是为了动画开始的位置是在50%的位置。

3、hexo next主题的官方实现

<div>
<a href="javascript:void(0);" class="demo2">Hexo next主题的实现</a>
</div>
.demo2{
position: relative;
text-decoration: none;
font-size: 20px;
color: #333;
}
.demo2:before{
content: "";
position: absolute;
left:;
bottom: -2px;
height: 2px;
width: 100%;
background: #4285f4;
transform: scale(0);
transition: all 0.3s;
}
.demo2:hover:before{
transform: scale(1);
}

这个实现的关键就是scale(0)到scale(1)的变化。

CSS3的scale transform的原点是中点,所以会从中间的位置开始动画。

4、两者区别

通过动画也看出来,next的动画有透明渐变的效果,和scale的表现形式有关。

第一个实现只是width变化,但是也可以用animation实现和next一样的效果。

不管怎样,总算是实现了吧。。。

原文地址:http://www.cnblogs.com/zhangmingze/p/5351983.html

CSS3制作hover下划线动画的更多相关文章

  1. CSS制作hover下划线动画

    .demo1{ position: relative; text-decoration: none; font-size: 20px; color: #333; } .demo1:before{ co ...

  2. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

  3. 基于CSS3制作的鼠标悬停动画菜单

    之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...

  4. 用css3制作旋转加载动画的几种方法

    以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...

  5. CSS3在hover下的几种效果

    CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦 效果一:360°旋转 修改rotate(旋转度数) * { transition:All 0.4s ease-in-out ...

  6. 奇妙的CSS3—导航栏下划线跟随效果

    先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...

  7. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  8. 分享9款用HTML5/CSS3制作的动物人物动画

    1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...

  9. 用CSS3制作的旋转六面体动画

    这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back

随机推荐

  1. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  2. mysql 数据库TEXT与BLOB

    BLOB和TEXT值会引起一些性能问题,特别是执行大量的删除操作时,会留下大量的“空洞”. 可使用OPTIMIZE TABLE来进行碎片整理. OPTIMIZE TABLE tablename

  3. 【一】我眼中的FeatureLayer

    1.来源 MapService 或者 FeatureService(10.0后)中的一个图层 Tabel 动态空间 2.使用 符号化 首先看下FLyr的继承关系:FeatureLayer  Graph ...

  4. canvas代替img渲染图片

    移动端用canvas代替img渲染图片,可以提高性能 var oImg = new Image(); oImg.src = url; oImg.onload = function(){ var cvs ...

  5. linux详细redis安装和php中redis扩展

    第一部分:安装redis 希望将redis安装到此目录 1 /usr/local/redis 希望将安装包下载到此目录 1 /usr/local/src 那么安装过程指令如下: 1 2 3 4 5 6 ...

  6. php 查询出来的字段名全是小写或者大写

    PHP PDO预定义常量 PDO::CASE_LOWER -- 强制列名是小写PDO::CASE_NATURAL -- 列名按照原始的方式PDO::CASE_UPPER -- 强制列名为大写 修改此参 ...

  7. C++中全局变量的那些事儿

    C/C++中的变量分为全局变量.静态全局变量.局部变量和静态局部变量,在<C/C++中静态局部变量的特点与应用>中我们介绍过静态局部变量,今天我们的目标是全局变量. 单个文件中的全局变量 ...

  8. sql server使用说明

    什么是sql server? SqlServer是微软的一款数据库系统产品. 是DBMS中的一种. 当每一个数据库安装到每一台电脑后,都会与计算机名称(有的是IP地址)关联.因为服务器用途的电脑不能经 ...

  9. hdfs的实现机制和文件系统概念

    1.HDFS的诞生背景: 数据量太大,在一个结点(机器)存不下.所以需要分布式存储,HDFS就是hadoop的分布式文件系统,来存储分布式数据. 2.共享文件系统也是一种分布式存储但有缺点:1.并发差 ...

  10. FFPLAY的原理(七)

    同步音频 现在我们已经有了一个比较像样的播放器.所以让我们看一下还有哪些零碎的东西没处理.上次,我们掩饰了一点同步问题,也就是同步音频到视频而不是其它的同 步方式.我们将采用和视频一样的方式:做一个内 ...