实现滑动(hover)文字后出现波浪下划线效果

作者：andy0012019.01.15来源：Web前端之家浏览：18401评论:0

关键词：hover 波浪

实现滑动(hover)文字后出现波浪下划线效果，玩玩吧。

直接上demo：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title>实现滑动(hover)文字后出现波浪下划线效果</title>    
	</head>    
	<style>    
		.linewave{    
			/*padding:4px 0px;*/    
			cursor:pointer;    
			text-decoration:underline;    
		}    
		.linewave:hover{    
			text-decoration:none;    
			background:url("data:image/svg+xml,<svg id='svg' width='100' height='20' viewBox='0 0 20 4' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path fill='none' stroke='#333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 '></path></svg>") repeat-x 0 100%;    
			background-size:20px auto;    
			animation:move 1s linear;    
			-webkit-animation:move 1s linear infinite;    
		}    
		@keyframes move{    
			0%{    
				background-position:0% 100%;    
			}    
			100%{    
				background-position:-20px 100%;    
			}    
		}    
		@-webkit-keyframes move{    
			0%{    
				background-position:0% 100%;    
			}    
			100%{    
				background-position:-20px 100%;    
			}    
		}    
	</style>    
	<body>    
		<span class='linewave'>Web前端之家www.jiangweishan.com</span>    
	</body>    
</html>

赏您的支持是我们创作的动力！