css 鼠标悬浮时，下划线变成会动的波浪线

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E

<template>
    <div style="padding: 20px">
        <a class="waveLink">鼠标悬浮时，下划线变成会动的波浪线</a>
    </div>
</template>
<style scoped>
    .waveLink {
        text-decoration: underline solid red;
    }
 
    .waveLink:hover {
        cursor: pointer;
        text-decoration: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
        background-size: 20px auto;
        animation: waveMove 1s infinite linear;
    }
 
    @keyframes waveMove {
        from {
            background-position: 0 100%;
        }
        to {
            background-position: -20px 100%;
        }
    }
</style>