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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b31e6d-2bdd7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b31e6d-2bdd7.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?