CSS实现动画效果的菜单收起展开图标，html实现动画效果的箭头

以下是一个使用CSS和HTML实现的简单的动画效果的菜单收起展开图标：

CSS代码：

.menu-icon {
  width: 50px;
  height: 10px;
  background-color: #333;
  position: relative;
  transition: background-color 0.3s;
}
 
.menu-icon.active {
  background-color: #000;
}
 
.menu-icon.active .top {
  transform: translateY(10px) rotate(45deg);
}
 
.menu-icon.active .middle {
  display: none;
}
 
.menu-icon.active .bottom {
  transform: translateY(-10px) rotate(-45deg);
}
 
.menu-icon span {
  position: absolute;
  background-color: #333;
  transition: transform 0.3s;
}
 
.menu-icon .top {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
 
.menu-icon .middle {
  top: 18px;
  width: 100%;
  height: 2px;
}
 
.menu-icon .bottom {
  top: 36px;
  left: 0;
  width: 100%;
  height: 2px;
}

HTML代码：

<div class="menu-icon">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>

JavaScript代码，用于切换菜单图标：

const menuIcon = document.querySelector('.menu-icon');
menuIcon.addEventListener('click', () => {
  menuIcon.classList.toggle('active');
});

这段代码实现了一个简单的菜单图标，点击它会切换为一个三角形（箭头），表示菜单的展开和收起状态。通过CSS的transform属性和transition属性，我们为这个图标添加了平滑的动画效果。