CSS：菜单图标动画

<!-- Menu Bars -->
<div class="menu-bars" id="menu-bars">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

.menu-bars {
  position: fixed;
  top: 1rem;
  right: 2rem;
  display: inline-block;
  cursor: pointer;
  z-index: 11;
}
.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 2px;
  background-color: #fff;
  margin: 8px 0;
  transition: 0.4s;
}
.change .bar1 {
  transform: rotate(-45deg) translate(-7px, 8px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  transform: rotate(45deg) translate(-6px, -8px);
}

const menuBars = document.getElementsById("menu-bars");
function toggleNav() {
    menuBars.classList.toggle("change");    
}
menuBars.addEventListener("click", toggleNav);

const menuBars = document.getElementById("menu-bars");

Css相关问答推荐

如何让CSS过渡应用时宽度增加，而不是减少？

将照片向下对齐至div并保持响应性

搜索栏突出显示角形HTML中的Mat-Form-field输入框的焦点

无限交替css动画之间的未知延迟

如何使用TailwindCSS溢出？

如何从 WooCommerce 中的 Betheme 图像中删除产品永久链接图标

当滚动量较小时，在滚动问题上动画粘性导航

我如何使用 CSS 在我的应用程序中每隔 3 位用逗号分隔数字？

Mat table - 保留第一列和复选框

CSS 字符串变量的正确null值是多少？

react 样式的条件类名称设置

如何为使用jsTreeR拖入层次 struct node 的元素添加顺序编号？

基于类的 CSS Select 器

调整屏幕大小时无法让我的视频背景保持不变

如何使单选按钮看起来像切换按钮

悬停效果：展开底部边框

如何知道哪个 HTML 元素导致了垂直滚动条

通过 JavaScript 更改 CSS 伪元素样式

HTML5 和边框

仅使用 CSS 交换 DIV 位置