Question

我正在尝试使用简单的动画制作汉堡包图标。代码是

* {
  box-sizing: border-box;
}
body {
  background-color: black;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.ham-wrapper {
  width: 100px;
  height: 100px;
  position: relative;
}

.hamburger {
  content: ' ';
  display: block;
  background-color: green;
  width: 80px;
  height: 8px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
}

.hamburger:after, .hamburger:before {
  content: '';
  display: block;
  background: blue;
  width: 80px;
  height: 8px;
  position: absolute;
  top: 0;
  border-radius: 4px;
}

.hamburger:after {
  margin-bottom: 0;
  top: 0;
  margin-top: calc(8px + 16px + 16px + 8px);
  opacity: 0.5;
}

.hamburger:before {
  margin-top: calc(8px + 16px);
  margin-bottom: 0;
  top: 0;
}

.hamburger:hover {
  transition: all 3s ease;
  transform: scale(0.3);
  opacity: 0;
}

.ham-wrapper:hover .hamburger:after{
  transition: all 3s ease;
  margin-top: calc(8px + 16px);
  transform: rotateZ(-45deg);
}

.ham-wrapper:hover .hamburger:before {
  transition: all 3s ease;
  transform: scale(0.3);
  opacity: 0;
}

<div class="ham-wrapper">
  <i class="hamburger"></i>
</div>

但是当我旋转 .hamburger 时，整个图标都会旋转。我希望 .hamburger:hover 中定义的变换属性仅作用于 .hamburger，而不作用于 .hamburger:after 和 .hamburger:before。我尝试使用 position:absolute;属性，但它似乎不起作用。我找不到解决方案。

Answer 1

我认为您需要一种不同的方法。 CSS Tricks 有关于 :before 和 :after 伪选择器的说法：

<块引用>

“请注意，内容仍然在它们所应用的元素内。命名感觉就像它们可能出现在元素之前或之后，但它实际上是在其他内容之前或之后。”< /p>

如何与元素交互，而不是与它的伪元素子元素交互？

1 个答案: