基于css3实现流动箭头动画

效果如下：

代码如下：

<template>
    <div class="wrapperBox">
        <div class="p-r m-t20">
            <div class="p-a lineBox"></div>
            <div class="p-a loop">
                <svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10824"><path d="M461.354667 95.658667a71.637333 71.637333 0 0 1 101.290666 0l365.696 365.696a71.637333 71.637333 0 0 1 0 101.290666l-365.696 365.696a71.637333 71.637333 0 1 1-101.290666-101.248L776.448 512l-315.093333-315.093333a71.594667 71.594667 0 0 1 0-101.248z" fill="#00F5FF" p-id="10825"></path><path d="M95.658667 95.658667a71.637333 71.637333 0 0 1 101.248 0l365.738666 365.696a71.594667 71.594667 0 0 1 0 101.290666l-365.738666 365.696a71.637333 71.637333 0 0 1-101.248-101.248L410.709333 512 95.658667 196.906667a71.637333 71.637333 0 0 1 0-101.248z" fill="#00F5FF" p-id="10826"></path></svg>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {}
    },
    mounted() {},
    methods: {}
}
</script>

<style lang='less' scoped>
.lineBox{
    background: repeating-linear-gradient(to right, #00E5EE, #00F5FF 10px, transparent 17px, transparent 20px); /* 创建一条虚线背景 */ 
    height: 6px; 
    width: 100px; 
    margin-top: 9px;
}
.loop{
    display: flex;
    width: 100px;
    animation-name: loop;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 2s;
    font-size: 24px;
    font-weight: bold;
}
@keyframes loop {
    0% {
    transform: translateX(0);
    }
    100% {
    transform: translateX(100%);
    }
}
</style>

如有漏洞，欢迎宝子互动指教！！！！！！！！！！！！！