Html 像素完美汉堡动画

我所拥有的： 我需要的是：悬停（使用有意义的值！-不仅仅是从眼睛看） HTML:

---

我稍微改变了你的风格

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

html{
框大小：边框框；
}
*,
*：：之前，
*：：之后{
框大小：继承；
}
身体{
保证金：0；
}
.汉堡{
高度：15px；
宽度：20px；
背景：#ff0000；
位置：相对位置；
顶部：120px；
左：120px；
变换：比例（10,10）；
}
.汉堡包跨度{
显示：块；
位置：绝对位置；
高度：3倍；
宽度：100%；
背景：#000；
过渡时间：250ms；
过渡属性：变换、不透明度；
}
.汉堡头跨度：第n个孩子（1）{
顶部：0px；
变换原点：中心；
}
.汉堡头跨度：第n个孩子（2）{
顶部：6px；
变换原点：左中心；
}
.汉堡头跨度：第n个孩子（3）{
顶部：12px；
变换原点：中心；
}
.汉堡头：悬停范围：第n个子项（1）{
变换：translateY（6px）旋转（45度）；
}
.汉堡头：悬停范围：第n个子项（2）{
变换：scaleX（0）；
不透明度：0；
}
.汉堡头：悬停范围：第n个子项（3）{
变换：translateY（-6px）旋转（-45度）
}

修改如下

 .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;
}

 .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;
}