编程知识 购物 网址 新闻 笑话 | 软件 日历 阅读 图书馆 China 头条阅读 学淘股 China Travel
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
   -> CSS -> 纯CSS实现导航栏下划线跟随滑动效果 -> 正文阅读

[CSS]纯CSS实现导航栏下划线跟随滑动效果

这篇文章主要介绍了纯CSS实现导航栏下划线跟随滑动效果,需要的朋友可以参考下
老规矩先上张图,如何使用纯 CSS 制作如下效果?

 
在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。
OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?
定义需求
我们定义一下简单的规则,要求如下:
假设 HTML 结构如下:

<ul>
  <li>不可思议的CSS</li>
  <li>导航栏</li>
  <li>光标小下划线跟随</li>
  <li>PURE CSS</li>
  <li>Nav Underline</li>
</ul>

导航栏目的  li  的宽度是不固定的
当从导航的左侧  li  移向右侧  li ,下划线从左往右移动。同理,当从导航的右侧  li  移向左侧  li ,下划线从右往左移动。
实现需求
第一眼看到这个效果,感觉这个跟随动画,仅靠 CSS 是不可能完成的。
如果想只用 CSS 实现,只能另辟蹊径,使用一些讨巧的方法。
好,下面就借助一些奇技淫巧,使用 CSS 一步一步完成这个效果。分析一下难点:
宽度不固定
第一个难点,  li 的宽度是不固定的。所以,我们可能需要从  li 本身的宽度上做文章。
既然每个  li 的宽度不一定,那么它对应的下划线的长度,肯定是是要和他本身相适应的。自然而然,我们就会想到使用它的  border-bottom 。

li {
    border-bottom: 2px solid #000;
}

那么,可能现在是这样子的(li 之间是相连在一起的,li 间的间隙使用  padding 产生):

 
默认隐藏,动画效果
当然,这里一开始都是没有下划线的,所以我们可能需要把他们给隐藏起来。

li {
    border-bottom: 0px solid #000;
}

推翻重来,借助伪元素
这样好像不行,因为隐藏之后,hover  li 的时候,需要下划线动画,而  li 本身肯定是不能移动的。所以,我们考虑借助伪元素。将下划线作用到每个  li 的伪元素之上。

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 2px solid #000;
}

下面考虑第一步的动画,hover 的时候,下划线要从一侧运动展开。所以,我们利用绝对定位,将  li 的伪元素的宽度设置为0,在 hover 的时候,宽度从  width: 0 -> width: 100% ,CSS 如下:

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
}
li:hover::before {
    width: 100%;
}

得到,如下效果:

 
左移左出,右移右出
OK,感觉离成功近了一步。现在还剩下一个最难的问题:
如何让线条跟随光标的移动动作,实现当从导航的左侧  li 移向右侧  li ,下划线从左往右移动。同理,当从导航的右侧  li 移向左侧  li ,下划线从右往左移动。
我们仔细看看,现在的效果:

 
当从第一个  li 切换到第二个  li 的时候,第一个  li 下划线收回的方向不正确。所以,可以能我们需要将下划线的初始位置位移一下,设置为  left: 100% ,这样每次下划线收回的时候,第一个  li 就正确了:

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
}
li:hover::before {
    left: 0;
    width: 100%;
}

看看效果:

 
额,仔细对比两张图,第二种效果其实是捡了芝麻丢了西瓜。第一个  li 的方向是正确了,但是第二个  li 下划线的移动方向又错误了。
神奇的 ~ 选择符
所以,我们迫切需要一种方法,能够不改变当前 hover 的  li 的下划线移动方式却能改变它下一个  li 的下划线的移动方式(好绕口)。
没错了,这里我们可以借助  ~ 选择符,完成这个艰难的使命,也是这个例子中,最最重要的一环。
对于当前 hover 的  li ,其对应伪元素的下划线的定位是  left: 100% ,而对于  li:hover ~ li::before ,它们的定位是  left: 0 。CSS 代码大致如下:

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}
li:hover::before {
    width: 100%;
    left: 0;
}
li:hover ~ li::before {
    left: 0;
}

至此,我们想要的效果就实现拉!撒花。看看:

 
效果不错,就是有点僵硬,我们可以适当改变缓动函数以及加上一个动画延迟,就可以实现上述开头里的那个效果了。当然,这些都是锦上添花的点缀。
完整的DEMO可以戳这里:  CodePen Demo -- 不可思议的CSS光标下划线跟随效果
最后
本方法 最大的瑕疵 在于一开始进入第一个 li 的时候,线条只能是从右往左,除此之外,都能很好的实现跟随效果。
许久没更新了,最近沉迷学习区块链相关技术,譬如以太坊编程,智能合约的编写巴拉巴拉的。后面还是会把更多精力放在本行,多出一些前端文章,CSS 的魅力还是无法抵挡的。
总结
以上所述是小编给大家介绍的纯CSS实现导航栏下划线跟随滑动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
  CSS 最新文章
详解css中background-clip属性的作用
纯CSS实现导航栏下划线跟随滑动效果
CSS 样式书写规范(推荐)
css3 边框、背景、文本效果的实现代码
详解如何用div实现自制滚动条
利用css3径向渐变做一张优惠券的示例
CSS多级数字序号的目录列表(2.2.1. 2.2.2 列
IE8 滤镜效果filter:alpha(opacity=20);IE下
css在不同浏览器中的唯一标识以height属性为
使用CSS3制作一个简单的进度条(demo)
上一篇文章      下一篇文章      查看所有文章
加:2018-04-04 23:32:39  更:2018-04-04 23:34:00 
 
360图书馆 软件开发资料 购物精选 新闻资讯 Chinese Culture 三丰软件 开发 中国文化 阅读网 头条阅读 学淘股 China Travel 日历 万年历 2020年6日历
2020-6-1 9:25:07
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程知识