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

【问题标题】：Animation for hamburger icon animation not working汉堡图标动画的动画不起作用
【发布时间】：2021-04-19 17:58:32
【问题描述】：

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

CSS

HTML

【问题讨论】：

请创建一个代码sn-p
stackoverflow.com/a/30942603/7358765

标签： html css animation hamburger-menu

【解决方案1】：

使用 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>

【讨论】：

【解决方案2】：

将 .hamburger :hover 更改为 .hamburger:hover - 没有空格。
.hamburger a 表示具有汉堡包类的元素，其中包含a 标签。你的代码中没有这个。将 .hamburger a 更改为 a.hamburger - 这意味着带有汉堡类的 a 标记。

【讨论】：

您好，两种方法我都做了，没有任何改变。同样，在更改 a.hamburger 类中的填充时，它也没有任何影响。