How does vue make the arrow scroll to the right and fade?

the effect is as follows:
these three arrows scroll to the right in turn, and I use the background image, which is added to the span tag, so how to achieve the most convenient?

HTML:
 <div class="arrowDiv" v-show="showArrowDiv">
          <span></span>
          <span></span>
          <span></span>
        </div>


  • adjust opacity plus filter
  • adjust color directly with font
  • gradient

rgba, can adjust opacity.


http://jsrun.net/3ChKp/edit

three or four to implement, the change of position, the change of transparency


gif diagram is the most convenient

Menu