纯CSS导航栏下划线跟随效果

最新推荐文章于 2022-03-15 11:43:27 发布

IT新时代

最新推荐文章于 2022-03-15 11:43:27 发布

阅读量3.4k

点赞数 12

文章标签： css 前端开发 web前端前端基础前端

本文链接：https://blog.csdn.net/llll789789/article/details/97424629

版权

本文介绍了如何仅使用CSS实现导航栏下划线跟随鼠标移动的效果。通过分析难点，利用li的伪元素、绝对定位、hover状态以及~选择符，逐步创建出宽度自适应且动态变化的下划线动画。

摘要由CSDN通过智能技术生成

导航栏下划线跟随效果这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？

定义需求

我们定义一下简单的规则，要求如下：

假设 HTML 结构如下：

<ul>
  <li>不可思议的CSS</li>
  <li>导航栏</li>
  <li>光标小下划线跟随</li>
  <li>PURE CSS</li>
  <li>Nav Underline</li>
</ul>
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

导航栏目的 li 的宽度是不固定的

当从导航的左侧 li 移向右侧 li，下划线从左往右移动。同理，当从导航的右侧 li 移向左侧 li，下划线从右往左移动。

实现需求

第一眼看到这个效果，感觉这个跟随动画，仅靠 CSS 是不可能完成的。

如果想只用 CSS 实现，只能另辟蹊径，使用一些讨巧的方法。

好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成这个效果。分析一下难点：

宽度不固定

第一个难点， li 的宽度是不固定的。所以，我们可能需要从 li 本身的宽度上做文章。

既然每个 li 的宽度不一定，那么它对应的下划线的长度