汉堡包图标动画不起作用

Question

我正在尝试为我的汉堡包图标创建一个旋转动画，但无论出于何种原因它都拒绝工作。我什至尝试将其作为“.hamburger a:hover”，但似乎没有任何效果。请问有人能找到解决办法吗？

CSS

HTML

Answer 1

1. 将 .hamburger :hover 更改为 .hamburger:hover - 没有空格。

2. .hamburger a 表示具有汉堡包类的元素，其中包含一个 a 标签。你的代码中没有那个。将 .hamburger a 更改为 a.hamburger - 这意味着带有汉堡包类的 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>