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画一个阴阳八卦图
Mar 09 HTML / CSS
浅析两列自适应布局的3种思路
May 03 HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
详解Canvas 跨域脱坑实践
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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
十天学会php(2)
2006/10/09 PHP
PHP反向代理类代码
2014/08/15 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python简单的制作图片验证码实例
2017/05/31 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python中collections模块的基本使用教程
2018/12/07 Python
python 图像平移和旋转的实例
2019/01/10 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
python matplotlib库的基本使用
2020/09/23 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
营业员岗位职责
2015/02/11 职场文书
学习经验交流会策划书
2015/11/02 职场文书
Redis批量生成数据的实现
2022/06/05 Redis