css链接悬停时滑动的下划线效果

作者：System 时间：2024年08月12日分类：所有,css3 字数：706

这篇文章距离上次修改已过273天，其中的内容可能已经有所变动。

要实现链接在悬停时滑动的下划线效果，可以使用CSS的text-decoration属性结合:hover伪类和animation属性。以下是一个简单的示例代码：

@keyframes slide-underline {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

a {
  position: relative;
  color: #00f; /* 链接颜色 */
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:hover:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px; /* 下划线厚度 */
  background: #00f; /* 下划线颜色 */
  transition: width 0.3s ease; /* 动画过渡效果 */
  animation: slide-underline 0.3s forwards; /* 动画名称，时长，填充模式 */
}

在HTML中，你只需要正常定义链接：

<a href="https://example.com">链接文本</a>

当鼠标悬停在链接上时，slide-underline动画会触发，创建一个滑动的下划线效果。

css链接悬停时滑动的下划线效果

评论已关闭

推荐阅读