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

这样也行?(导航栏滑动效果html)前端导航栏 左右滑动,纯CSS实现导航栏下划线跟随滑动效果,纯CSS实现导航栏下划线跟随滑动效果,

sauo3年前 (2022-09-17)电脑知识78

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

分享给朋友:

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

这都可以(php保存网络图片到本地)php下载图片到本地,php保存图片到本地的方法,php保存图片到本地的方法,

免费领取腾讯云服务器! 下面列几种网上收集的利用php脚本将远程图片保存至本地的方法,各位自行测试代码是否可用,另外php保存远程图片到本地并不能确保百分百的一定会拉取到远程图片的数据。 php保存远程图片到本地的方法 方法...

没想到(imagettftext函数)imagettftext函数支持的编码类型,imagettftext(): any2eucjp(): invalid code in input string 错误解决方法,imagettftext(): any2eucjp(): invalid code in input string 错误解决方法,

免费领取腾讯云服务器! 最近在研究关于php生成图片的东西,发现了 imagettftext() 函数中一个不是错误的错误,具体的错误情况如下所示。 错误代码:...

没想到(php获取IP地址)php获取当前时间的函数,php获取顶级域名/一级域名的方法,php获取顶级域名/一级域名的方法,

免费领取腾讯云服务器! 列出几个网上收集的关于利用php脚本获取顶级域名的方法,可能分析的不是很完全,大家可以参考一下,适当的做一些调整。 php获取顶级域名的方法 示例1: Jav...

燃爆了(jquery给元素添加点击事件)jquery怎么触发点击事件,jquery实现点击某元素外触发事件的方法,jquery实现点击某元素外触发事件的方法,

燃爆了(jquery给元素添加点击事件)jquery怎么触发点击事件,jquery实现点击某元素外触发事件的方法,jquery实现点击某元素外触发事件的方法,

免费领取腾讯云服务器! 写了一个jq指定元素排除某个事件触发的效果,正好用上了上一篇博文中所说的 closest 方法,那么下面就来详细的说一下。 jq实现点击某元素外触发事件的方法 排除某元素触发事件,无非是整个文档中,点...

居然可以这样(js closest方法)什么是closest方法,jquery中 closest() 方法的详解和使用,jquery中 closest() 方法的详解和使用,

免费领取腾讯云服务器! 写在一个JS动态效果的时候,发现了一个在JQuery中从来没有见过的 closest() 方法,看了一下介绍和使用方法,发现非常的好用。下面的博文,飞鸟慕鱼博客就来详细的说一下。 jQuery closest() 方...

居然可以这样(css画爱心)爱心图形创意,CSS实现爱心形状动态加载条的方法,CSS实现爱心形状动态加载条的方法,

居然可以这样(css画爱心)爱心图形创意,CSS实现爱心形状动态加载条的方法,CSS实现爱心形状动态加载条的方法,

免费领取腾讯云服务器! 下面记录一个利用纯CSS样式代码实现一个爱心形状的动态加载条,用到了CSS中的动画效果与伪元素样式,有一定的参考价值。感兴趣的小伙伴,不妨测试一下。 纯CSS实现心形加载动画效果 1、动画效果...

发表评论

访客

看不清,换一张

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