静态网页怎么实现导航栏动画的功能？

静态网页实现导航栏动画的方式有很多种，以下是其中一种基本的实现方法：

1. 在 HTML 中添加导航栏的代码，并为每个导航链接指定一个 ID，例如：

<nav>
  <ul>
    <li><a href="#home" id="home-link">Home</a></li>
    <li><a href="#about" id="about-link">About</a></li>
    <li><a href="#services" id="services-link">Services</a></li>
    <li><a href="#contact" id="contact-link">Contact</a></li>
  </ul>
</nav>

2. 在 CSS 中定义导航栏的样式，例如：

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: #333;
  font-size: 16px;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
}

nav ul li a:hover {
  color: #fff;
  background-color: #333;
}

3. 在 JavaScript 中添加事件监听器，当用户滚动页面时，检测当前页面滚动到的位置，根据位置来判断当前应该高亮哪个导航链接，并为该链接添加一个 active 类，例如：

var sections = document.querySelectorAll('section');
var navLinks = document.querySelectorAll('nav ul li a');

window.addEventListener('scroll', function() {
  var currentSectionIndex = 0;
  var currentSectionTop = Math.abs(sections[0].getBoundingClientRect().top);
  
  for (var i = 1; i < sections.length; i++) {
    var sectionTop = Math.abs(sections[i].getBoundingClientRect().top);
    
    if (sectionTop < currentSectionTop) {
      currentSectionIndex = i;
      currentSectionTop = sectionTop;
    }
  }
  
  navLinks.forEach(function(navLink) {
    navLink.classList.remove('active');
  });
  
  navLinks[currentSectionIndex].classList.add('active');
});

4. 在 CSS 中为 active 类定义样式，例如：

nav ul li a.active {
  color: #fff;
  background-color: #333;
}

这样，当用户滚动页面时，导航栏中当前所在部分的链接会高亮显示，从而实现了导航栏的动画效果。