我試圖讓一個漢堡包圖示在點擊時變成一個 x，然后在再次點擊時恢復。我認為我已經設定了影片，但我需要它在點擊時觸發而不是恒定設定。
.nav-toggle {
position: absolute;
top: 2.3rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
height: 22px;
width: 22px;
}
.nav-toggle:hover { /
cursor: pointer;
}
.nav-toggle .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
.nav-toggle .bar:nth-child(2) {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.nav-toggle .bar:nth-child(1) {
transform: rotate(45deg) translatey(13px)
}
.nav-toggle .bar:nth-child(3) {
transform: rotate(-45deg) translateY(-13px)
}
.nav-toggle:active {
transition: 1s;
}
ToggleNavLinks 函式僅用于將元素顯示設定為與漢堡圖示無關。
<a class="nav-toggle" onclick="ToggleNavLinks()" >
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
選單打開圖片參考：
uj5u.com熱心網友回復：
您可以tranform: rotate()在頂部和底部使用transition中間跨度的寬度。
let navToggle = document.querySelector('.nav-toggle')
let bars = document.querySelectorAll('.bar')
function toggleHamburger(e) {
bars.forEach(bar => bar.classList.toggle('x'))
}
navToggle.addEventListener('click', toggleHamburger).nav-toggle {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 22px;
width: 22px;
}
.nav-toggle .bar {
height: 3px;
width: 100%;
background-color: black;
transition: all 100ms ease-in-out;
}
.nav-toggle:hover {
cursor: pointer;
}
.x:nth-of-type(1) {
transition: all 100ms ease-in-out;
transform: rotate(45deg);
transform-origin: top left;
width: 28px;
}
.x:nth-of-type(2) {
transition: all 100ms ease-in-out;
transform-origin: center;
width: 0;
}
.x:nth-of-type(3) {
transition: all 100ms ease-in-out;
transform: rotate(-45deg);
transform-origin: bottom left;
width: 28px;
}<a class="nav-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/410454.html
標籤：
上一篇：更改螢屏尺寸時抑制CSS過渡