汉堡图标动画的动画不起作用

Question

我正在尝试为我的汉堡包图标创建一个旋转动画，但它出于某种原因拒绝工作。我什至试过把它写成“.hamburger a:hover”，但似乎没有任何效果。谁能找到解决方案？

CSS

HTML

Answer 1

将 .hamburger :hover 更改为 .hamburger:hover - 否 space.
.hamburger a 表示带有汉堡包 class 的元素，其中包含一个 a 标签。你的代码中没有那个。将 .hamburger a 更改为 a.hamburger - 这意味着带有汉堡 class 的 a 标签。

Answer 2

使用 CSS display: inline-block 或 display: block 使元素具有宽度和高度。

.hamburger {
  position: relative;
  font-size: 40px !important;
  padding: 0px !important;
  padding-left: 30px !important;
  text-align: left !important;
  color: #000;
  text-decoration: none;
  display: inline-block;
  transition: 0.75 ease-in-out !important;
}

.hamburger:hover {
  transform: scale(1.1) rotate(90deg) !important;
}

<div class="wrapper">
  <div class="header">
    <a class="hamburger" href="#" onclick="dropdown()"> &equiv; </a>
  </div>

汉堡图标动画的动画不起作用

Animation for hamburger icon animation not working

html

css

animation

hamburger-menu