<!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>
