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中transform变换模型的渲染
May 27 HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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类
2006/11/27 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
详解jquery和vue对比
2019/04/16 jQuery
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
Python open读写文件实现脚本
2008/09/06 Python
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python调用新浪微博API项目实践
2014/07/28 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python_LDA实现方法详解
2017/10/25 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
原生python实现knn分类算法
2019/10/24 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
商场消防安全责任书
2014/07/29 职场文书
2015年党员发展工作总结
2015/05/13 职场文书