在查看代码之前，我们先来了解一下实现该效果的基本原理，首先旗帜是由多个宽高相当的长方形组成，并且沿着Y轴以从左到右的顺序进行上下移动，再以相反的顺序进行移动，以此循环实现效果。

了解了基本原理，接下来就可以根据我们自己的方法去实现，在这里可以看看博主的思路，首先宽高相当的长方形我们可以用多个 div 实现，并设立一个大 div 做为父级，通过设置 display:flex 属性实现子级div同行，而上下移动效果我们可以用css3的 transform: translateY(0px) 属性实现，并且为了保持我们看到的效果更好，我们可以用 @keyframes 属性设置一个动画，并设置动画的时间及时间。代码如下。

  <div class="flag">
    <div style="background-color: lightcoral" />
    <div style="background-color: lightsalmon" />
    <div style="background-color: lightgoldenrodyellow" />
    <div style="background-color: lightgreen" />
    <div style="background-color: lightcyan" />
    <div style="background-color: lightblue" />
    <div style="background-color: purple" />
  </div>
  <style lang="less" scoped>
  .flag {
    display: flex;
    padding: 15px;
  }

  @keyframes move {
    from {
      transform: translateY(-5px);
    }

    to {
      transform: translateY(5px);
    }
  }

  .flag div {
    width: 30px;
    height: 140px;
    border-radius: 3px;
    animation-name: move;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
  }
</style>

运行上述代码，我们可以看到效果是这样的，div 虽然上下移动了，但是每次运动的很突兀，并且没有从下到上的步骤，而且每个 div 运行轨迹一致，看不出旗帜效果，别急下面我们会具体解决。效果如下图。