网页导航下划线动画特效

下划线动画特效

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

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

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

效果如上图所示。

接下来直接看代码:

基础结构与样式代码

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

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 7,106评论 4 39
  • 美丽的雪谷,魅力无限,洁白的雪花,飘飘落落。喜欢大自然吗,喜欢就来吧!约你,走起!我在洪波客栈等你呦。
    雪谷秋姐阅读 221评论 0 4
  • 今天留店,到十点多才下班 悠悠的踩着单车往回走,感觉突然从一段时间以来的匆忙里脱离出来了 就像小时候学习比较紧张,...
    婧婷Fineyoga阅读 110评论 0 0
  • 深圳曾经开了一个很大规模的有关汽车售后服务的集中市场,皇马汽车百货广场,邀请我们去那里开了一个汽车主题的书店,销售...
    潘燕生阅读 177评论 0 1