一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

1. 前言

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

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

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

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

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

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

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

2. 实现

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

完整的代码如下:

<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 属性让下划线(背景图片)看起来像是从左往右地进入,实际上只是元素的背景图片水平尺寸变长了而已。

原文链接:https://juejin.cn/post/7329336551006339109 作者:情欲

(0)
上一篇 2024年1月29日 下午4:00
下一篇 2024年1月29日 下午4:10

相关推荐

发表评论

登录后才能评论