css 是你永远学不会的语言——css 实现下划线动画

1. 前言

CSS 几乎是前端必学的一门语言,相信大家在编写 web 页面时,都会感叹 CSS 的强大和它的简单易用。

我说 CSS 是一门学不会的语言,不知大家有何看法?相信大部分人都与我持不同意见,不过我得说一下,CSS 虽然简单,但是它也不简单,是不是如听一席话?哈哈~

下面回到标题提高的下划线动画实现,我们来看一下下面的这个效果:

不知道大家会如何实现这个效果,如果你说用 js 能实现,那你千万别划走,请认真听讲。下面这个效果如果用 js 来实现,那估计得难到天上去了。噫吁戲,危乎高哉了,js 之难,难于上青天。

这两个 GIF 中包含的 CSS 代码并不多,简简单单的七八行代码就能实现,相信有思路的小伙伴已经开始上手实现了。下面我们就讲一下如何实现这个效果哈。

2. 实现

首先讲一下它的实现原理:使用元素的背景图来实现,通过控制背景图的 background-size 属性来实现。

完整的代码如下:

html 复制代码
<style>
    span {
        line-height: 2;
        background: -webkit-linear-gradient(left, #12c2e9, #c471ed, #f64f59) no-repeat right bottom;
        background-size: 0% 2px;
        transition: background-size 500ms linear;
    }

    span:hover {
        background-position-x: left;
        background-size: 100% 2px;
    }

</style>


<span>看看您错过了上个月 Google Open Source Live 活动中的哪些精彩内容。了解使用 Istio 观测您的服务、分析流经服务网格的请求等话题!</span>

这里多嘴一句,CSS 属性 line-height 的后面如果跟的是数字,则以 1 em 为基准进行计算,例如 line-height: 1 的效果相当于 line-height: 1em;

可以看到我们使用 background-position: right bottom 将背景在过渡前定位到 span 元素的右下角,但是在鼠标触发 span 元素的 hover 时,我们又将 span 元素的 CSS 属性 background-position-x 变为 left,这样就能实现下划线(也就是元素的背景图片)左进右出的效果。

然后我们设置 CSS 属性 background-size, 开始时为 0,鼠标触发 hover 时则为 100%,这里主要是控制背景图片水平方向上的尺寸,而 span 元素的背景图片在数值方向上的尺寸并没有变化。

相关的实现细节:

  • 我们通过控制元素的 background-position-x 属性来实现背景图片左进右出的效果。
  • 我们通过控制元素的 background-size 属性让下划线(背景图片)看起来像是从左往右地进入,实际上只是元素的背景图片水平尺寸变长了而已。
相关推荐
www_pp_7 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码41 分钟前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端1 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia1 小时前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia1 小时前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js