動畫背景顏色的一個項目（顯示塊）

我試圖達到像那個網站上的效果www.momkai.com 當我將一個項目（一個li設置爲顯示爲塊）懸停時，我想要背景顏色從左至右進行動畫製作。任何想法如何實現它？理想情況下沒有圖像。動畫背景顏色的一個項目（顯示塊）

2011-03-30 Francis Thibault

Momkai使用JavaScript（MooTools的）做動畫，你可以使用jQuery做類似的事情。 – 2011-03-30 12:25:32

他們這樣做的方式是通過顯示第一個圖像（白色 - 黑色文本），然後在鼠標懸停動畫製作第二個圖像的剪輯（http://www.w3schools.com/css/pr_pos_clip.asp）樣式（黑白文本），它位於第一個文件的頂部。

2011-03-30 12:25:53 Andy

最簡單的辦法是使用一個背景圖像和類似jQuery的動畫背景的位置，但對於一個沒有圖像選項一起使用是這樣的：

<div> 
    <span>link text</span> 
    <div class="bgcolor"></div> 
</div> 

div { 
    position: relative; 
    background: #F00; 
    width: 200px; 
} 

div div.bgcolor { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    height: 100%; 
    width: 0px; 
    background: #FF0; 
}

，並在文檔加載

li.hover(function() { 
    $(this).children(".bgcolor").animate({width:"200px"}); 
}, function() { 
    $(this).children(".bgcolor").animate({width:"0px"}); 
});

來源

2011-03-30 12:26:46

你可以嘗試使用CSS3轉換。他們是很好的支持：http://caniuse.com/#search=transition

一個例子： http://jsfiddle.net/VirusZ/6VnTm/

來源

2011-03-30 12:36:38

「符合標準的模式（嚴格！DOCTYPE）的Windows Internet Explorer 7及更高版本可以將：hover僞類應用於任何元素，而不僅僅是鏈接。」 [http://msdn.microsoft.com/en-us/library/ms530766.aspx](http://msdn.microsoft.com/en-us/library/ms530766.aspx）雖然IE沒有任何css3轉換，效果會在那裏，沒有動畫。 – 2011-03-30 12:58:51

因爲我的網站是HTML5 - CSS3，所以使用了你的技術。創造奇蹟，謝謝！ – 2011-03-30 19:27:55

動畫背景顏色的一個項目（顯示塊）

回答

相關問題