css 鼠标放上去会动的波浪下划线

.a_link, .entry a[href*='/study/']{color:#f30;text-decoration:underline;padding:2px 0;}

.a_link:hover,.entry a[href*='/study/']: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%; }

}

你可能感兴趣的:(css 鼠标放上去会动的波浪下划线)