如何垂直放大和缩小菜单(带动画)

垂直放大和缩小菜单是一种常见的前端开发需求，可以通过CSS和JavaScript来实现。下面是一种常见的实现方式：

首先，在HTML中创建一个菜单容器，例如一个<ul>元素，并为菜单项添加相应的类名或ID。

<ul id="menu">
  <li class="menu-item">菜单项1</li>
  <li class="menu-item">菜单项2</li>
  <li class="menu-item">菜单项3</li>
</ul>

在CSS中定义菜单项的样式，包括初始状态和放大/缩小的动画效果。

.menu-item {
  /* 初始状态样式 */
  transform: scaleY(1);
  transition: transform 0.3s ease;
}

.menu-item:hover {
  /* 鼠标悬停时的放大效果 */
  transform: scaleY(1.2);
}

使用JavaScript监听鼠标事件，当鼠标悬停在菜单项上时，添加相应的类名或样式，触发放大效果。

const menuItems = document.querySelectorAll('.menu-item');

menuItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    item.classList.add('menu-item-hover');
  });

  item.addEventListener('mouseout', () => {
    item.classList.remove('menu-item-hover');
  });
});

通过以上步骤，当鼠标悬停在菜单项上时，菜单项会在垂直方向上放大，添加动画效果。当鼠标移出时，菜单项会恢复初始状态。

这种垂直放大和缩小菜单的效果常用于网站导航菜单、下拉菜单等场景，可以提升用户交互体验。

腾讯云相关产品和产品介绍链接地址：