360导航的首页，经常会有一个方形的文字滚动动画，大致就是红色方框移动到红色的文字上方时，文字颜色变为白色。

效果看起来像是一个红色方框在移动，其实，是文字与背景色的变换，让我们产生的错觉。实际上是白底红字在不断的变换成红底白字，而产生的效果。

直接进入正题，先上效果图（gif图与页面真实效果有差异）：

如上方效果，我们今天就用jquery来简单的实现它。

首先，我们先将结构搭好，整个结构是由两层相同的文字，通过定位叠加在一起的。说不太清楚，看代码吧。

<div class="content">
  <div class="box">
    <div class="font r_w_font r_w_font1">旋</div>
    <div class="font r_w_font r_w_font2">转</div>
    <div class="font w_r_font w_r_font3">动</div>
    <div class="font w_r_font w_r_font4">画</div>
    <div class="font w_r_font w_r_font1">旋</div>
    <div class="font w_r_font w_r_font2">转</div>
    <div class="font r_w_font r_w_font3">动</div>
    <div class="font r_w_font r_w_font4">画</div>
  </div>
</div>

有了结构以后，就该设计其样式，主要样式是，分别给每一个字相应的文字颜色和背景色。具体样式可以对照以下CSS代码。

*{
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.content{
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
.box{
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}
.font{
  width: 14px;
  height: 14px;
  position: absolute;
  overflow: hidden;
}
.r_w_font{
  color: #fff;
  background-color: #ff0000;
}
.w_r_font{
  color: #ff0000;
  background-color: #fff;
}
.r_w_font1{
  left: 0;
  top: 0;
}
.r_w_font2{
  left: 50%;
  top: 0;
}
.w_r_font3{
  left: 0;
  top: 50%;
}
.w_r_font4{
  left: 50%;
  top: 50%;
}
.w_r_font1{
  left: 0;
  top: 0;
  width: 0;
}
.w_r_font2{
  left: 50%;
  top: 0;
}
.r_w_font3{
  left: 0;
  top: 50%;
  width: 0px;
}
.r_w_font4{
  left: 50%;
  top: 50%;
  height: 0px;
}

结构和样式搭建好以后，想要让动画效果出来，今天就用到了我们强大的jQuery库了。

先引入jq文件，然后来编写我们自己的逻辑代码，核心使用到jq的animate方法，具体还是看下图代码吧。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  move();
})

function move(){
  $('.w_r_font1').animate({
    width:'14px'
  },1000,'linear');
  $('.w_r_font2').animate({
    width: '0px',
    textIndent: '-14px',
    left: '28px'
  },1000,'linear',function(){
    $('.w_r_font2').css({
      width: '14px',
      height: '0px',
      textIndent: '0px',
      left: '14px'
    });
    $('.w_r_font2').animate({
      height: '14px'
    },1000,'linear',function(){
      $('.w_r_font2').css({
        width: '',
        height: '',
        textIndent: '',
        left: ''
      })
    });
    $('.r_w_font4').animate({
      height: '14px'
    },1000,'linear',function(){
      $('.r_w_font3').css({
        width: '0',
        textIndent: '-14px',
        left: '14px'
      });
      $('.r_w_font4').animate({
        width: '0px'
      },1000,'linear',function(){
        $('.r_w_font4').css({
          width: '',
          height: ''
        })
      });
      $('.r_w_font3').animate({
        width: '14px',
        textIndent: '0px',
        left: '0px'
      },1000,'linear',function(){
        $('.r_w_font3').animate({
          height: '0px'
        },1000,'linear',function(){
          $('.r_w_font3').css({
            width: '',
            height: '',
            textIndent: '',
            left: ''
          })
        });
        $('.w_r_font1').animate({
          height: '0px'
        },1000,'linear',function(){
          $('.w_r_font1').css({
            width: '',
            height: ''
          });
          move();
        })
      })
    })
  })
};
</script>

以上，就实现了360导航上的这个效果，猛戳这里。当然，相信大家有更简单更有效的方法去实现它。我们，加油！

Over~拜