0
我正在尋找創建一個簡單的動畫,如果你移動鼠標打開按鈕打開,你看到一個單詞,如果你離開它,按鈕關閉。鼠標懸停和關閉XHTML/HTML5
我想要的是它打開時的反向順序,所以當鼠標從按鈕移動時,它慢慢關閉而不是關閉,就像打開它一樣。
有沒有一種方法可以僅使用XHTML或HTML5來實現這一點?
我正在尋找創建一個簡單的動畫,如果你移動鼠標打開按鈕打開,你看到一個單詞,如果你離開它,按鈕關閉。鼠標懸停和關閉XHTML/HTML5
我想要的是它打開時的反向順序,所以當鼠標從按鈕移動時,它慢慢關閉而不是關閉,就像打開它一樣。
有沒有一種方法可以僅使用XHTML或HTML5來實現這一點?
如果我理解您的要求,這是你想要什麼:
<div id="button">
<span>This is your Text</span>
</div>
<style>
#button{
height: 20px;
width: 100px;
background-color: blue;
color: white;
transition: height 0.25s linear 0.25s;
}
#button span{
opacity: 0;
transition: opacity 0.1s linear;
}
#button:hover{
height: 50px;
transition: height 0.25s linear;
}
#button:hover span{
opacity: 1;
transition: opacity 0.1s linear 0.25s;
}
</style>
這個片段創建一個按鈕100x20px和懸停(當你用你的鼠標移動),它變得更大和文本被顯示。
你是什麼意思按鈕慢慢關閉? – Andy
這不是一個HTML5的東西,你應該調查關於CSS3動畫或JS動畫。 – Skatox
你也許可以用CSS做到這一點...取決於「打開」的含義。 –