CSS - 像素完美的汉堡包动画

Question

我有什么：https://jsfiddle.net/f6z1km3k/1/ 我需要的是：悬停（有价值的意义！ - 不仅仅是从眼睛） HTML：

  .header-hamburger:hover  span:nth-child(1) {
      transform: rotate(45deg)
    }

    .header-hamburger:hover span:nth-child(2) {
      transform: scaleX(0);
      opacity: 0;
    }

    .header-hamburger:hover span:nth-child(3) {
      transform: rotate(-45deg) 
    }

Answer 1

我略微改变了你的风格。

我移动跨度6px，因为现在每个跨度高3px，空白空间也是3px

＆＃13;

＆＃13;

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.header-hamburger {
  height: 15px;
  width: 20px;

  background: #ff0000;
  position: relative;
  top: 120px;
  left: 120px;
  transform: scale(10, 10);
}

.header-hamburger span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #000;
  transition: 250ms;
  transition-property: transform, opacity;
}

.header-hamburger span:nth-child(1) {
  top: 0px;
  transform-origin: center center;
}

.header-hamburger span:nth-child(2) {
  top: 6px;
  transform-origin: left center;
}

.header-hamburger span:nth-child(3) {
  top: 12px;
  transform-origin: center center;
}



.header-hamburger:hover  span:nth-child(1) {
  transform:  translateY(6px) rotate(45deg);
}

.header-hamburger:hover span:nth-child(2) {
  transform: scaleX(0);
  opacity: 0;
}

.header-hamburger:hover span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg) 
}

＆＃13;

<div class="header-hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

像这样修改

 .header-hamburger span:nth-child(1) {
        top: 0px;
        transform-origin: left center;

    }

    .header-hamburger:hover span:nth-child(1) {
        transform: rotate(36deg);
        right: -2px;
    }

.header-hamburger:hover span:nth-child(3) {
    transform: rotate(-36deg);
    right: -2px;
}

.header-hamburger span:nth-child(3) {
    top: 12px;
    transform-origin: left center;
}