CSS3 TOGGLE HTML5

-1

我用CSS3製作了一個動畫，我已經在其他頁面上做了這些，但現在不工作，我不知道爲什麼請幫助我！我沒有看到我的錯誤，我已經測試了位置：絕對，但沒有。CSS3 TOGGLE HTML5

這是我的HTML：

<body> 
<header id="header"> 
    <nav> 
       <div id="toggle"> 
        <div class="one"></div> 
        <div class="two"></div> 
        <div class="three"></div> 
       </div> 
    </nav> 
</header> 
</body>

，這我CSS3：

#toggle { 
    width: 28px; 
    height: 30px; 
    float: left; 
    opacity: 0.5; 

} 

#toggle:hover{ 
    opacity: 0.9; 
} 


#toggle div { 
    width: 100%; 
    height: 5px; 
    background: white; 
    margin: 4px auto; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 

} 

#toggle.on .one { 
    -webkit-transform: rotate(45deg) translate(5px, 5px); 
    -moz-transform: rotate(45deg) translate(5px, 5px); 
} 

#toggle.on .two { 
    opacity: 0; 
} 

#toggle.on .three { 
    -webkit-transform: rotate(-45deg) translate(7px, -8px); 
    -moz-transform: rotate(-45deg) translate(7px, -8px); 
} 

#header{ 
position: fixed; 
    top: 0; 
    left: 0; 
    width: 80px; 
    height: 70px; 
    background-color: rgba(0,0,0, 0.9); 
}

感謝名單很多關於你的答案！

來源

2013-12-24 Alex Moody

什麼添加類'on'？問題是什麼？「不起作用」沒有描述任何東西。 – Popnoodles

不製作動畫，但是很好的答案user20303 –

它不做動畫請...我想做這個動畫，當我在中間第二個小節點擊，然後在另一個時間點擊之後 –

如果你想讓它，當你點擊它們旋轉，使用：

#toggle .one:active { 
-webkit-transform: rotate(45deg) translate(5px, 5px); 
-moz-transform: rotate(45deg) translate(5px, 5px); 
} 

#toggle .two:active { 
opacity: 0; 
} 

#toggle .three:active { 
-webkit-transform: rotate(-45deg) translate(7px, -8px); 
-moz-transform: rotate(-45deg) translate(7px, -8px); 
}

來源

2013-12-24 00:46:10

「toggle.on未在HTML中指定」。這就是爲什麼我們在提出解決方案之前詢問是什麼原因造成的。你可能是對的。 – Popnoodles

我認爲他的意思是：懸停。 – 2013-12-24 00:51:08

感謝很多它的工作，但是另一個詞是什麼使得像ON？哪些工作 –

回答

相關問題