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

我稍微改變了你的風格。

我移動跨度6像素，因爲現在每跨度的3px高，空的空間也3px的

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) 
 
}

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

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