会动的下划线

最新推荐文章于 2024-01-08 19:00:00 发布

原创最新推荐文章于 2024-01-08 19:00:00 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

在看张鑫旭的博客时候，发现他的a标签hover的时候有会动的波浪线，就看了一下

具体就是用到了:hover，hover的时候添加一个animation和一个波浪线的svg背景，同时将原来的下划线隐藏（text-decoration: none)

具体的animation是修改background-position-x

@keyframes waveMove {
	from {background-position-x: 0;}
	to {background-position-x: 50%;}
}

a {
  color: #f30;
  text-decoration: underline;
}
a:hover {
  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;
}

在codepen上看效果

https://codepen.io/lister/pen/EJxmwz