[TOC]
>[success] # css鼠标hover波浪下划线效果
指向前：
指向后：
1. index.html
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css鼠标hover波浪下划线效果</title>
<style>
.box {
display: inline-block;
color: #f30;
text-decoration: underline;
padding: 2px 0;
cursor: pointer;
}
.box:hover {
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>
</head>
<body>
<div class="box">
测试文字
</div>
</body>
</html>
~~~
