純CSS動畫使用單選按鈕激活的移動菜單

我有一個移動菜單，點擊時應該形成X，但它不會響應並卡在它的形狀上。我不知道它爲什麼會這麼做，但據我分析，這個代碼應該點擊菜單來使菜單變成X.我附上代碼以供參考。純CSS動畫使用單選按鈕激活的移動菜單

這些CSS和HTML

/* Checkbox Hack */ 
 
input[type=checkbox] { 
 
    display: block; 
 
    width: 40px; 
 
    height: 32px; 
 
    position: absolute; 
 
    top: -7px; 
 
    left: -5px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    z-index: 2; 
 
    -webkit-touch-callout: none; 
 
} 
 

 
/* Default State */ 
 
.divko { 
 
    background: green; 
 
    width: 400px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
/* Toggled State */ 
 
.myspan { 
 
    display: block; 
 
    width: 33px; 
 
    height: 4px; 
 
    margin-bottom: 5px; 
 
    position: relative; 
 
    background: #cdcdcd; 
 
    border-radius: 3px; 
 
    z-index: 1; 
 
    transform-origin: 4px 0px; 
 
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease; 
 
} 
 

 
.myspan:first-child { 
 
    transform-origin: 0% 0%; 
 
} 
 

 
.myspan:nth-last-child(2) { 
 
    transform-origin: 0% 100%; 
 
} 
 

 
input[type=checkbox]:checked ~ .myspan { 
 
    opacity: 1; 
 
    transform: rotate(45deg) translate(-2px, -1px); 
 
    background: #232323; 
 
} 
 

 
input[type=checkbox]:checked ~ .divko { 
 
    background: red; 
 
}

<div for="toggle-1"> <span class="myspan"></span> 
 
    <span class="myspan"></span> 
 
    <span class="myspan"></span></div> 
 
<input type="checkbox" id="toggle-1"> 
 
<div class="divko">I'm controlled by toggle. No JavaScript!</div>

這裏是dabblet http://dabblet.com/gist/5b4667ecc7255c228cd488c080140d95

來源

2017-08-09 Dominic Guana

嘿，我得到了它的第一跨度之前修改你的HTML代替輸入與您當前的CSS工作。 CSS並沒有被應用到它，因爲你沒有真正選擇它，因爲它的位置。 –

事實上，我可以通過應用Ori的修復來修復它。 –

把複選框，我已經給.menu類到div之前，並應用關於input[type=checkbox]:checked ~ .menu > .myspan的規則。

/* Checkbox Hack */ 
 
input[type=checkbox] { 
 
    display: block; 
 
    width: 40px; 
 
    height: 32px; 
 
    position: absolute; 
 
    top: -7px; 
 
    left: -5px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    z-index: 2; 
 
    -webkit-touch-callout: none; 
 
} 
 

 
/* Default State */ 
 
.divko { 
 
    background: green; 
 
    width: 400px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
/* Toggled State */ 
 
.myspan { 
 
    display: block; 
 
    width: 33px; 
 
    height: 4px; 
 
    margin-bottom: 5px; 
 
    position: relative; 
 
    background: #cdcdcd; 
 
    border-radius: 3px; 
 
    z-index: 1; 
 
    transform-origin: 4px 2px; 
 
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease; 
 
} 
 

 
input[type=checkbox]:checked ~ .menu > .myspan { 
 
    opacity: 1; 
 
    background: #232323; 
 
} 
 

 
input[type=checkbox]:checked ~ .menu > .myspan:first-child { 
 
    transform: rotate(45deg); 
 
} 
 

 
input[type=checkbox]:checked ~ .menu > .myspan:nth-child(2) { 
 
    transform: translate(-100px); 
 
} 
 

 
input[type=checkbox]:checked ~ .menu > .myspan:last-child { 
 
    transform: rotate(-45deg); 
 
} 
 

 
input[type=checkbox]:checked ~ .divko { 
 
    background: red; 
 
}

<input type="checkbox" id="toggle-1"> 
 

 
<div for="toggle-1" class="menu"> 
 
    <span class="myspan"></span> 
 
    <span class="myspan"></span> 
 
    <span class="myspan"></span> 
 
</div> 
 

 
<div class="divko">I'm controlled by toggle. No JavaScript!</div>

來源

2017-08-09 17:50:33

純CSS動畫使用單選按鈕激活的移動菜單

回答

相關問題