一个HTML 导航栏下划线跟随效果

这几日学习html，一直在B站乱逛，发现网站的动效做的真好。然后翻到了这一页：

点此查看

上面的导航栏是一个下划线跟随的效果。由于有一个初始的选项（当前页面对应标签保持蓝色），鼠标划过时除了高亮项下面的下划线也要跟随。如果只实现前面这些效果可以用css完成，但是其实这里面的下划线是一个动画效果，仔细观察发现下划线相当于在border-bottom上面做水平运动，切换标签时有一个过渡效果，因此实际上这个下划线其实是一个独立的bar滑块

结构定义如下：

    <div class="nav"><ul><li class="now" id="cur"><a href="#">综合</a></li><li><a href="#">视频</a></li><li><a href="#">番剧</a></li><li><a href="#">影视</a></li><li><a href="#">直播</a></li></ul><div class="go hover_bar"></div></div>

nav的position设为相对位移，div如下：

        .go {width: 32px;height: 3px;background-color: #00a1d6;position: absolute;left: 0;bottom: 0;transition: all .2s cubic-bezier(0.215, 0.610, 0.355, 1) 0s;}

假定每个标签的宽度间距固定，那么只要在js中监听鼠标事件，让bar移动n个标签的距离即可.js代码如下

<script>ul = document.getElementsByTagName("ul")[0].children;sub_active = document.getElementById("sub_active");var str = "hello world";sub_active_pos_left = sub_active.offsetLeft;nav_bar = document.getElementById("nav_bar");for (let i = 0; i < ul.length; i++) {ul[i].addEventListener("mouseenter", function (oEvent) {var str = "hello world";nav_bar.style.left = this.offsetLeft + "px";});ul[i].addEventListener("mouseleave", function () {nav_bar.style.left = sub_active_pos_left + "px";});}
</script>

转载于:https://www.cnblogs.com/alex-zen/p/9752274.html

一个HTML 导航栏下划线跟随效果相关推荐

css 导航栏下划线跟随效果，默认第一个li为选中状态
本次主要是联系css实现导航栏下划线跟随效果 HTML: <ul id="list"><li class="current_li">&l ...
html导航默认选中状态,css 导航栏下划线跟随效果，默认第一个li为选中状态
本次主要是联系css实现导航栏下划线跟随效果 HTML: js:主要是为了刷新页面,让第一个li默认有下划线和选中效果 css: /*下划线跟随*/ ul{ display: flex; positi ...
纯CSS导航栏下划线跟随效果
参考文章 <ul><li>111</li><li>2222</li><li>3333333</li><li&g ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
纯CSS导航栏下划线滑动效果
纯CSS导航栏下划线滑动效果问题描述面向 C 端的产品嘛,总有一些动效想要提高用户体验,以下是用纯 css 实现导航栏选中下划线滑动效果解决方案以下是实现效果: 主要代码如下: <tem ...
js+css制作导航栏下划线跟随动画，App+H5点击效果
这是使用Vue制作的一个下划线跟随效果,没有使用其他插件目录 1. 制作一个初始的导航栏 2. 增加点击样式 3. 下划线移动最终代码注意事项这是最终效果↓ 一开始从网上查其他人的做法,大部分 ...
水平导航栏+导航栏跟随+导航栏下划线滑动效果
先放代码: HTML: <!doctype html> <html> <head> <meta charset="utf-8"> & ...
js+css制作导航栏下划线跟随动画，自适应元素尺寸变化，Vue/Uniapp
以前也写过一个差不多的,但上一个写的存在很多问题,尤其是css要使用 justify-content: space-around才能正常计算下滑宽度,导致了在很多场景都不实用,其实那一天就想到更好的解 ...
纯CSS实现导航栏下拉动画效果
实现思路导航栏的下拉效果通过在ul的li里再嵌套一个ul,再通过animation属性改变第二导航栏ul的高度来实现导航栏下拉动画效果.老铁没毛病. 实现效果: HTML代码 <div cla ...

一个HTML 导航栏下划线跟随效果

一个HTML 导航栏下划线跟随效果相关推荐

最新文章

热门文章