CSS3制作hover下划线动画
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下划线动画的更多相关文章
- CSS制作hover下划线动画
.demo1{ position: relative; text-decoration: none; font-size: 20px; color: #333; } .demo1:before{ co ...
- 纯css实现Magicline Navigation(下划线动画导航菜单)
看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...
- 基于CSS3制作的鼠标悬停动画菜单
之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- CSS3在hover下的几种效果
CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦 效果一:360°旋转 修改rotate(旋转度数) * { transition:All 0.4s ease-in-out ...
- 奇妙的CSS3—导航栏下划线跟随效果
先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
- 分享9款用HTML5/CSS3制作的动物人物动画
1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
随机推荐
- android学习日记18--Adapter简介
一.Adapter 1.简述 最近学的GridView和Gallery 都有用到Adapter适配器,发现它貌似蛮重要的.专门上网搜了下有关Adapter的资料.android绝大多数应用是JAVA语 ...
- Shell脚本文件操作
Linux Shell http://baike.baidu.com/link?url=2LxUhKzlh5xBUgQrS0JEc61xi761nvCS7SHJsa1U1SkVbw3CC869AoUC ...
- 学习笔记之#pragma
http://baike.baidu.com/link?url=lxA9Wl1KnacWUDZYz5U06iKMkUAeI6dr0x1wQ4i-rqf6Dpk6hEeOOaj2XhvGx9VLVm2z ...
- How to Map Distinct Value Types Using Java Generics--reference
原文:http://www.codeaffine.com/2015/03/04/map-distinct-value-types-using-java-generics/ Occasionally t ...
- Android(java)学习笔记119:继承中父类没有无参构造
/* 如果父类没有无参构造方法,那么子类的构造方法会出现什么现象呢? 报错. 如何解决呢? A:在父类中加一个无参构造方法 B:通过使用super关键字去显示的调用父类的带参构造方法 C:子类通过th ...
- C#基础篇03
1:不管是实参还是形参,都在内存中开辟空间. 2:写一个方法,它的功能一定要单一,方法中最忌讳的就是出现提示用户输入的字眼. 3:out参数 如果在一个方法中,返回多个类型相同的值时,可以考虑返回一个 ...
- Linux系统故障处理案例(一)
运行环境:CentOS6.7 故障原因: 昨天在线执行命令yum -y update 在命令执行途中,强制中断并直接运行poweroff命令关机.再次开机出现如图所示故障指示: 根据提示信息分析,可能 ...
- myeclipse安装本地maven fastdfs_client.jar
为了方便应用程序的访问FastDFS,官网提供了fastdfs-client-java,以便更好的与应用程序结合使用. 下载fastdfs-client-java源码添加到项目工程里面,添加配置文件: ...
- java编程常用技术
一:将String字符串放在最前面 防止发生NullPointerException异常,我们通常把String字符串放在equals方法的左边来比较,这样可以有效的避免 空指针异常的发生. 第一种情 ...
- 어느 도시 보유 하 면 사랑 이다(事態が発生すれば、ある都市の恋はしません)【Si les villes un amour】{If have love in a city}
如果在北京拥有爱情 半夜在簋街喝啤酒 吃小龙虾 在后海的苦情歌声里 搂着你数那四合院的瓦片 如果在上海拥有爱情 去外滩手挽手 吹吹风 坐一下午 去城隍庙尝试各种小吃 嘲笑你嘴角残余的糯米糕 如果在杭州 ...