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

  

2、实现小黑科技

  1. <div>
  2. <a href="javascript:void(0);" class="demo1">自己实现的hover效果</a>
  3. </div>
  1. .demo1{
  2. position: relative;
  3. text-decoration: none;
  4. font-size: 20px;
  5. color: #333;
  6. }
  7. .demo1:before{
  8. content: "";
  9. position: absolute;
  10. left: 50%;
  11. bottom: -2px;
  12. width:;
  13. height: 2px;
  14. background: #4285f4;
  15. transition: all .3s;
  16. }
  17. .demo1:hover:before{
  18. width: 100%;
  19. left:;
  20. right:;
  21. }

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

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

3、hexo next主题的官方实现

  1. <div>
  2. <a href="javascript:void(0);" class="demo2">Hexo next主题的实现</a>
  3. </div>
  1. .demo2{
  2. position: relative;
  3. text-decoration: none;
  4. font-size: 20px;
  5. color: #333;
  6. }
  7. .demo2:before{
  8. content: "";
  9. position: absolute;
  10. left:;
  11. bottom: -2px;
  12. height: 2px;
  13. width: 100%;
  14. background: #4285f4;
  15. transform: scale(0);
  16. transition: all 0.3s;
  17. }
  18. .demo2:hover:before{
  19. transform: scale(1);
  20. }

这个实现的关键就是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. 华为的JAVA面试题及答案(部分)

    华为的JAVA面试题 (后记:没有想到华为的面试题就是非同一般,非常多题不是一眼就行看得出来,至少对我这种鸟来说是这样.对我个人来说,看看这种题,可能比看<Think In Java>都还 ...

  2. 给定表达式[x/2] + y + x * y, 其中x,y都是正整数。

    改进了一下,不过还是要十多秒吧. package com.boco.study; import java.math.BigDecimal; import java.util.Calendar; imp ...

  3. [Practical Git] Format commit history with git log arguments

    When running the git log command, we can pass in options as arguments toformat the data shown for ea ...

  4. Android 通用获取Ip的方法(判断手机是否联网的方法)!!!

    大家好,我们这一节讲一下,Android获取Ip的一些方法,在我们开发中,有判断手机是否联网,或者想获得当前手机的Ip地址,当然WIFI连接的和 我们3G卡的Ip地址当然是不一样的. 首先我尝试了如下 ...

  5. android利用zbar二维码扫描-(解决中文乱码及扫描区域定义)

    写在最前(这是对上一篇博文的问题做的更新[android利用zbar二维码扫描]) project下载   zbarLib编译project  project下载0积分 bug 在2.3的系统中Hol ...

  6. Codeforces 444C DZY Loves Colors(线段树)

    题目大意:Codeforces 444C DZY Loves Colors 题目大意:两种操作,1是改动区间上l到r上面德值为x,2是询问l到r区间总的改动值. 解题思路:线段树模板题. #inclu ...

  7. pomelo 服务器开发常用术语

    gate服务器 一个应用的gate服务器,一般不参与rpc调用,也就是说其配置项里可以没有port字段,仅仅有clientPort字段,它的作用是做前端的负载均衡.客户端往往首先向gate服务器发出请 ...

  8. android136 360 拖拽

    差补器原理: 图标拖拽:     activity_drag_view.xml <?xml version="1.0" encoding="utf-8"? ...

  9. 焦点轮播图——myfocus焦点图库

    网站网址: http://demo.jb51.net/js/myfocus/demo.html 简单3步,你即可以用上myFocus. Step 1. 在html的标签内引入相关文件 <scri ...

  10. 【转】Oracle - 数据库的实例、表空间、用户、表之间关系

    [转]Oracle - 数据库的实例.表空间.用户.表之间关系 完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例. 1) 数据库是一系列物理文件的集合(数据文件,控制文件,联机 ...