如何使用 HTML CSS 和 JavaScript 在导航菜单中制作弯曲的活动标签？

在导航菜单上，我们会看到一些具有动态效果的标签，它们可以随着鼠标的移动而弯曲、旋转或放大缩小。这些标签不仅可以提高网站的设计感，还可以为用户带来更好的浏览体验。下面我们将介绍使用 HTML、CSS 和 JavaScript 制作一种弯曲的活动标签的方法。

HTML

首先，在 HTML 文件中，我们需要创建一个导航栏和一个包含菜单项的列表。每个菜单项都是一个链接，使用 a 标签创建。例如：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS

接着，在 CSS 文件中，我们需要对菜单项进行样式设置，包括颜色、字体大小、边框和位置等。在本例中，我们还将添加一个名为 .active 的类，以便在 JavaScript 中更改当前菜单项的样式。

nav {
  background-color: #333;
  display: flex;
  justify-content: center;
}

ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid #fff;
  margin: 0 10px;
  position: relative;
}

a {
  color: #fff;
  font-size: 20px;
  padding: 10px;
  text-decoration: none;
}

.active {
  background-color: #fff;
  color: #333;
}

JavaScript

现在，我们将使用 JavaScript 添加一个事件监听器，以便在用户单击菜单项时更改其样式。此外，我们还将使用 requestAnimationFrame 函数创建一个动画，使当前活动菜单项弯曲。

const nav = document.querySelector('nav');
const items = nav.querySelectorAll('li');
let active = null;

function setActive(item) {
  if (active) {
    active.classList.remove('active');
  }
  
  active = item;
  active.classList.add('active');
}

function animate(time) {
  if (active) {
    const link = active.querySelector('a');
    const { x, y, width, height } = link.getBoundingClientRect();
    const radius = Math.max(width, height) * 2;
    
    const cx = x + width / 2 - nav.offsetLeft;
    const cy = y + height / 2 - nav.offsetTop;
    
    const dx = Math.sin(time / 1000) * radius;
    const dy = Math.cos(time / 1000) * radius;
    
    active.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
  }
  
  requestAnimationFrame(animate);
}

animate(0);

for (const item of items) {
  item.addEventListener('click', () => setActive(item));
}

好的，现在我们已经介绍了如何使用 HTML、CSS 和 JavaScript 制作一种弯曲的活动标签，希望对您有所帮助。