网页导航下划线动画特效
文章图片
下划线动画特效 网页导航是网页中非常重要的功能，所以导航链接的交互也显得非常重要。比较常见的交互效果，就是当鼠标悬停或者点击之后具有样式的变化，例如颜色变化，大小变化等。或者是添加一些比的图标，例如小三角，添加边框等等。
无论添加了怎样的效果，主要目的都是为了提高用户体验，增加交互体验，让用户在触发导航的时候变得更“好玩”。
本文也是为了让用户在点击导航链接的时候觉得更有趣，所以分享了一个导航下划线的动画特效，其实就是当点击之后会在导航链接下方增加边框效果，但这个边框是具有动画效果，所以会显得更加有趣，让用户可以玩一天。
效果如上图所示。
接下来直接看代码：
基础结构与样式代码
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
body {
background: #1A1E23;
display: flex;
justify-content: center;
align-items: center;
min-height: 50em;
}nav {
position: relative;
padding-bottom: 12px;
}
nav .line {
height: 2px;
position: absolute;
bottom: 0;
margin: 10px 0 0 0;
background: #FF1847;
}
nav ul {
display: flex;
}
nav ul li {
height: 30px;
margin: 0 40px 0 0;
opacity: 0.4;
transition: all 0.4s ease;
}
nav ul li:hover {
opacity: 0.7;
}
nav ul li.active {
opacity: 1;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
font-weight: 600;
letter-spacing: 0.2em;
font-size: 14px;
line-height: 30px;
}
通过上面的代码可以看出，结构还是常用的结构，整体是ul，导航的边框结构是单独的标签控制，也就是line。
样式也是常用的的样式代码，这里为了方便居中以及排版，所以是采用了flex弹性布局，如果对弹性布局不熟悉的小伙伴可在网上搜索了解一下。
下面看js代码；
功能实现代码
代码解释：
【网页导航下划线动画特效】为了方便控制，案例中是通过jQuery来书写效果。
特效代码中，没有直接写死固定的数据，都是通过直接获取元素的相关样式，添加到边框划线中，好处是使用更灵活，方便维护。
if(active.length) {
pos = active.position().left;
wid = active.width();
line.css({
left: pos,
width: wid
});
}
这段代码主要是初始化.line的样式，包括位置以及宽度。
然后后面的代码主要是设置边框的动画效果，它的运动效果有两种，一种是从左往右进行位移以及发生长度变化；另外一种是从右往左进行位移，里面的代码都是jQuery中常用的方法，主要就是animate()方法以及样式设置的方法。
推荐阅读
- 使用协程爬取网页，计算网页数据大小
- IDEA|IDEA 创建工程
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- markdown中使用iframe|markdown中使用iframe 嵌套网页
- 移动用户体验设计（底部导航）
- 第六课|第六课 js管理页面元素位置大小
- EXCEL的汽车导航-全能的GPS定位
- React|React Native创建TabBar和导航栏
- 解决edge 每次启动 都会新开一个360网址导航页
- Python用requests模块实现动态网页爬虫