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旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
详解CSS玩转图片Base64编码
May 25 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php命令行写shell实例详解
2018/07/19 PHP
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
React 组件间的通信示例
2018/06/14 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
python局部赋值的规则
2013/03/07 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python将list转为matrix的方法
2018/12/12 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
python迭代器常见用法实例分析
2019/11/22 Python
python实现字符串和数字拼接
2020/03/02 Python
python实现简单俄罗斯方块
2020/03/13 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
学生个人的自我评价分享
2013/11/05 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
惊天动地观后感
2015/06/10 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
教师节作文之小学四年级
2019/09/03 职场文书