×

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

作者:andy0012019.01.15来源:Web前端之家浏览:3983评论:0
关键词:hover波浪
微信公众号

微信公众号

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

image.png

直接上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>


温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/html112412412481098.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero