CSS特效-超链接动感波浪线_CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 边框</title>
</head>
<body>

<style>
a {
    color: #f30;
    text-decoration: underline;
    padding: 6px 0;
}

a:hover {
    color: #f30;
    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>
<a href="">鼠标悬浮时，会出现动态波浪线</a>
</body>
</html>