CSS3制作hover下划线动画


Posted in HTML / CSS onMarch 27, 2017

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

CSS3制作hover下划线动画

2、实现小黑科技

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

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

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

3、hexo next主题的官方实现

<!-- html结构 -->
<div>
    <a href="javascript:void(0);" class="demo2">Hexo next主题的实现</a>
</div>
/* css样式 */
        .demo2{
            position: relative;
            text-decoration: none;
            font-size: 20px;
            color: #333;
        }
        .demo2:before{
            content: "";
            position: absolute;
            left: 0;
            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一样的效果。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

HTML / CSS 相关文章推荐
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 #HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 #HTML / CSS
CSS3实现头像旋转效果
Mar 13 #HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 #HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 #HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 #HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 #HTML / CSS
You might like
php操作SVN版本服务器类代码
2011/11/27 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
原生js验证简洁注册登录页面
2016/12/17 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python读写unicode文件的方法
2015/07/10 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
基于Python log 的正确打开方式
2018/04/28 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python同时替换多个字符串方法示例
2019/09/17 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
公司门卫岗位职责
2014/03/15 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
化学专业自荐信
2014/05/28 职场文书
机电专业求职信
2014/06/14 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
小学主题班会教案
2015/08/17 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL