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 相关文章推荐
CSS3美化表单控件全集
Jun 29 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
CSS 伪元素::marker详解
Jun 26 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
PHP date函数参数详解
2006/11/27 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
ext实现完整的登录代码
2008/08/08 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
JS删除String里某个字符的方法
2021/01/06 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python中的十大图像处理工具(小结)
2019/06/10 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python web框架中实现原生分页
2019/09/08 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
自我评价是什么
2014/01/04 职场文书
班主任工作年限证明
2014/01/12 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
日元符号 ¥
2022/02/17 杂记