当前位置：首页 > 电脑知识 > 正文内容

这样也行？（导航栏滑动效果html）前端导航栏 左右滑动，纯CSS实现导航栏下划线跟随滑动效果，纯CSS实现导航栏下划线跟随滑动效果，

sauo2年前 (2022-09-17)电脑知识36

web页面中使用一些CSS动画效果，可以使用网站看着更加的炫酷。下面这篇博文由飞鸟慕鱼说一个关于网页导航栏实现下划线跟随滑动效果的方法，此方法全部由CSS代码实现，非常的简单方便。

CSS导航栏下划线跟随滑动效果

示例图：

实现代码：

下面示例代码，复制保存到本为为html格式的文件，即可查看！

Markup
<style> .items { display:flex; } .items li { width: 100px; height: 40px; text-align: center; line-height: 40px; color: #333; position: relative; margin: 10px 10px 0px 0px; cursor: pointer; list-style-type:none; } .items li:before { content:; height:2px; background-color:#c95119; width:100%; position:absolute; left:0; bottom:0; transform:scaleX(0); transition:.3s; } .items li:hover:before { transform:scaleX(1); } </style> <ul class="items"> <li>飞鸟慕鱼博客</li> <li>飞鸟慕鱼博客</li> <li>飞鸟慕鱼博客</li> </ul>复制

本文链接：http://blog.sauo.top/?id=329 感谢分享!

分享到：

扫描二维码推送至手机访问。

版权声明：本文由冬眠先生个人博客发布，如需转载请注明出处。

本文链接：http://blog.sauo.top/?id=329

标签: 源码知识技能
分享给朋友：
返回列表

上一篇：满满干货（java求幂运算）js 幂函数，js中求幂运算的方法，js中求幂运算的方法，

下一篇：一篇读懂（div可编辑属性）div不可编辑，div设置可编辑内容的方法，div设置可编辑内容的方法，

“这样也行？（导航栏滑动效果html）前端导航栏 左右滑动，纯CSS实现导航栏下划线跟随滑动效果，纯CSS实现导航栏下划线跟随滑动效果，” 的相关文章

原创（禁止ping命令操作）linux如何停止ping，linux禁ping操作的方法，linux禁ping操作的方法，

免费领取腾讯云服务器！ linux中可以通过ssh命令来禁止其它机器来ping自己，下面是配置方法，大家可以参考一下。 linux中禁ping的方法 方法1 临时禁ping，系统重启后失效，已在ubuntu系...

干货分享（php file_get_contents curl）php file_get_contents post，php file_get_contents(): SSL operation failed with code 1. OpenSSL Error message.....，php file_get_contents(): SSL operation failed with code 1. OpenSSL Error message.....，

免费领取腾讯云服务器！ 在调试php脚本代码时，发现使用 file_get_contents() 函数请求HTTPS的网址链接时出现了报错，其报错代码如下面所示“file_get_contents(): SSL operation failed with...

这都可以？（php获取服务器信息）php获取客户端，php获取服务器操作系统类型的方法，php获取服务器操作系统类型的方法，

免费领取腾讯云服务器！ 利用php脚本中的 php_uname() 函数与 PHP_OS 变量可以获取服务器操作系统的类型，具体的使用方法如下。 php获取服务器操作系统的方法 1、php_uname() 获取服务器操作系统...

这都可以（PHP百度百科）pHp是什么，php中关于strtotime函数31日取前几个月日期的BUG，php中关于strtotime函数31日取前几个月日期的BUG，

免费领取腾讯云服务器！ 在使用php脚本中的 strtotime 函数取前几个月的日期时，发现每到31日时，取出的前几个月的日期都会出现错误。仔细检查了一下，发现在利用 strtotime 函数取前几个月的日期时，给 strtotime 函数的参数并不规范...

不看后悔（php全局变量有哪些）php全局变量和局部变量的区别，php全局变量与js全局变量的区别，php全局变量与js全局变量的区别，

免费领取腾讯云服务器！ 因为经常写php与js代码，有时候使用全局变量的时候经常的混淆，这篇文章就来说说js中的全局变量与php中的全局变量的区别。 js全局变量与php全局变量的区别 php全局变量 php...

没想到（PHP重定向）php获取重定向后的地址，php实现页面重定向的方法，php实现页面重定向的方法，

免费领取腾讯云服务器！ php脚本实现页面重定向有多种方法，下面列几种简单的方法，供大家来参考一下。 php实现页面重定向的方法 方法1： 使用php中的 header() 函数来实现页面的跳转，实现重定向的...

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP. Theme by TOYEAN.