网页导航下划线动画特效

下划线动画特效

网页导航是网页中非常重要的功能，所以导航链接的交互也显得非常重要。比较常见的交互效果，就是当鼠标悬停或者点击之后具有样式的变化，例如颜色变化，大小变化等。或者是添加一些比的图标，例如小三角，添加边框等等。

无论添加了怎样的效果，主要目的都是为了提高用户体验，增加交互体验，让用户在触发导航的时候变得更“好玩”。

本文也是为了让用户在点击导航链接的时候觉得更有趣，所以分享了一个导航下划线的动画特效，其实就是当点击之后会在导航链接下方增加边框效果，但这个边框是具有动画效果，所以会显得更加有趣，让用户可以玩一天。

效果如上图所示。

接下来直接看代码：

基础结构与样式代码

<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()方法以及样式设置的方法。