css 创建向右箭头而不是X的汉堡包

wmomyfyw 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(151)

按照在线教程创建一个汉堡包。教程显示了一个X和给出的代码，当复制时会创建一个右指箭头。
这是汉堡包的HTML和CSS代码。

.hamburger:hover span:nth-child(2) {
  transform: translateX(10px);
  background-color: var(--primary);
}

.hamburger.is-active span:nth-child(1) {
  transform: translate(0px, -2px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(15px);
}

.hamburger.is-active span:nth-child(3) {
  transform: translate(-3px, 3px) rotate(-45deg);
}

<button class="hamburger is-active">
  <span></span>
  <span></span>
  <span></span>
</button>

css

来源：https://stackoverflow.com/questions/75729261/hamburger-creating-a-right-facing-arrow-instead-of-a-x

1条答案

按热度按时间

j5fpnvbx1#

对代码进行以下更改
1 -添加JavaScript代码以将.is-active类切换到.hamburger。
2 -将缺省样式添加到span。
3 -将.is-active添加到.hamburger时，将样式添加到span

const hamburgerMenu = document.querySelector('.hamburger');

hamburgerMenu.addEventListener('click', function() {
  hamburgerMenu.classList.toggle('is-active');
});

.hamburger {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  transition: all 0.3s ease;
}

.hamburger:hover {
  background-color: #ddd;
}

span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: #333;
  margin-bottom: 5px;
  transition: transform 0.3s ease;
}

.hamburger.is-active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 5px);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -5px);
}

<button class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</button>

赞(0）回复(0）举报 2023-03-20

我来回答

css 创建向右箭头而不是X的汉堡包

1条答案

相关问题

热门标签

最新问答