网页导航下划线动画特效

下划线动画特效

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

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

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

效果如上图所示。

接下来直接看代码：

基础结构与样式代码

    

        
网站首页
        
平面设计
        
网页设计
        
手绘设计
        
UI设计
        
web前端设计
    
    

通过上面的代码可以看出，结构还是常用的结构，整体是ul，导航的边框结构是单独的标签控制，也就是line。

样式也是常用的的样式代码，这里为了方便居中以及排版，所以是采用了flex弹性布局，如果对弹性布局不熟悉的小伙伴可在网上搜索了解一下。

下面看js代码；

功能实现代码

代码解释：

为了方便控制，案例中是通过jQuery来书写效果。

特效代码中，没有直接写死固定的数据，都是通过直接获取元素的相关样式，添加到边框划线中，好处是使用更灵活，方便维护。

if(active.length) {
  pos = active.position().left;
  wid = active.width();
  line.css({
    left: pos,
    width: wid
  });
}

这段代码主要是初始化.line的样式，包括位置以及宽度。

然后后面的代码主要是设置边框的动画效果，它的运动效果有两种，一种是从左往右进行位移以及发生长度变化；另外一种是从右往左进行位移，里面的代码都是jQuery中常用的方法，主要就是animate()方法以及样式设置的方法。