HTML 实现滑动横线 更改样式效果

实现滑动横线并更改样式效果可以使用 CSS3 的过渡效果，结合 JavaScript 实现。以下是一个简单的示例代码：

HTML 代码：

<div class="underline-container">
  <a href="#" class="underline-link">Link 1</a>
  <a href="#" class="underline-link">Link 2</a>
  <a href="#" class="underline-link">Link 3</a>
  <div class="underline"></div>
</div>

CSS 代码：

.underline-container {
  position: relative;
  display: inline-block;
  font-size: 0; /* 移除空格 */
}

.underline-link {
  display: inline-block;
  padding: 10px;
  font-size: 16px;
  text-decoration: none;
  color: #333;
  position: relative;
  z-index: 1;
}

.underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 33.33%; /* 根据链接数量调整宽度 */
  background-color: #333;
  transition: transform 0.3s ease;
  z-index: 0;
}

.underline-link:hover ~ .underline {
  transform: translateX(100%);
}

.underline-link:first-of-type:hover ~ .underline {
  transform: none;
}

.underline-link:nth-of-type(2):hover ~ .underline {
  transform: translateX(33.33%);
}

.underline-link:last-of-type:hover ~ .underline {
  transform: translateX(66.66%);
}

JavaScript 代码：

const underlineLinks = document.querySelectorAll('.underline-link');

underlineLinks.forEach((link) => {
  link.addEventListener('mouseenter', () => {
    underlineLinks.forEach((link) => {
      link.classList.remove('active');
    });
    link.classList.add('active');
  });
});

这个示例代码会在每个链接下方添加一个横线，并且当鼠标悬停在链接上时，横线会滑动到该链接下方并更改样式。您可以根据需要调整链接数量以及样式。