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>

Css3 css3-Animation javascript vue.js

Feb.24,2022

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

Previous: How to hide the original component after router-view jump in vue routing

Next: Can VUE still display the current page after refreshing?

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-1bef809-31c60.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-1bef809-31c60.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?