下划线动画特效
网页导航是网页中非常重要的功能，所以导航链接的交互也显得非常重要。比较常见的交互效果，就是当鼠标悬停或者点击之后具有样式的变化，例如颜色变化，大小变化等。或者是添加一些比的图标，例如小三角，添加边框等等。
无论添加了怎样的效果，主要目的都是为了提高用户体验，增加交互体验，让用户在触发导航的时候变得更“好玩”。
本文也是为了让用户在点击导航链接的时候觉得更有趣，所以分享了一个导航下划线的动画特效，其实就是当点击之后会在导航链接下方增加边框效果，但这个边框是具有动画效果，所以会显得更加有趣，让用户可以玩一天。
效果如上图所示。
接下来直接看代码：
基础结构与样式代码
<style>
* {
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;
}
</style>
<nav>
<ul>
<li class="active"><a href="#">网站首页</a></li>
<li class=""><a href="#">平面设计</a></li>
<li class=""><a href="#">网页设计</a></li>
<li class=""><a href="#">手绘设计</a></li>
<li class=""><a href="#">UI设计</a></li>
<li class=""><a href="#">web前端设计</a></li>
</ul>
<div class="line"></div>
</nav>
通过上面的代码可以看出，结构还是常用的结构，整体是ul，导航的边框结构是单独的标签控制，也就是line。
样式也是常用的的样式代码，这里为了方便居中以及排版，所以是采用了flex弹性布局，如果对弹性布局不熟悉的小伙伴可在网上搜索了解一下。
下面看js代码；
功能实现代码
<script src="jquery-1.7.2.min.js"></script>
<script>
var nav = $('nav');
var line = $('.line');
var active = nav.find('.active');
var pos = 0;
var wid = 0;
if(active.length) {
pos = active.position().left;
wid = active.width();
line.css({
left: pos,
width: wid
});
}
nav.find('ul li a').click(function(e) {
if(!$(this).parent().hasClass('active')) {
var _this = $(this);
nav.find('ul li').removeClass('active');
var position = _this.parent().position();
var width = _this.parent().width();
if(position.left >= pos) {
line.animate({
width: ((position.left - pos) + width)
}, 300, function() {
line.animate({
width: width,
left: position.left
}, 150);
_this.parent().addClass('active');
});
} else {
line.animate({
left: position.left,
width: ((pos - position.left) + wid)
}, 300, function() {
line.animate({
width: width
}, 150);
_this.parent().addClass('active');
});
}
pos = position.left;
wid = width;
}
});
</script>
代码解释：
为了方便控制，案例中是通过jQuery来书写效果。
特效代码中，没有直接写死固定的数据，都是通过直接获取元素的相关样式，添加到边框划线中，好处是使用更灵活，方便维护。
if(active.length) {
pos = active.position().left;
wid = active.width();
line.css({
left: pos,
width: wid
});
}
这段代码主要是初始化.line的样式，包括位置以及宽度。
然后后面的代码主要是设置边框的动画效果，它的运动效果有两种，一种是从左往右进行位移以及发生长度变化；另外一种是从右往左进行位移，里面的代码都是jQuery中常用的方法，主要就是animate()方法以及样式设置的方法。
