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

本文链接：https://blog.csdn.net/weixin_41192489/article/details/114679819

实现原理

在:hover 样式中，添加波浪线动画，底图为底色透明的波浪线的一截，网址为：

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>