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

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

直接上demo：html>

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

.linewave{

/*padding:4px 0px;*/

cursor:pointer;

text-decoration:underline;

}

.linewave:hover{

text-decoration:none;

background:url("data:image/svg+xml,") 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%;

}

}

Web前端之家www.jiangweishan.com