CSS3動畫風格的源代碼

瀏覽Handimania網站我意識到當鼠標懸停它時，標題會閃動一次。現在我知道這可能是一種用CSS或CSS3完成的風格動畫（我是否正確？），但我不太確定如何可以看到的源代碼。CSS3動畫風格的源代碼

到目前爲止，當一個吸引人的靜態網頁在我面前彈出時，我可以掃描它的html以獲得其祕密和見解。現在我發現自己無法以相同的方式處理這些動態內容。目前我可以告訴的是，應該有一個名爲hover的類，它在0％到100％之間變淡，並且在靜態灰色圖像上返回到具有透明背景的氰基PNG標題0％。

這是最遠的我可以去

<div id="logo"> 
<img src="http://www.handimania.com/wp-content/themes/handimania/images/logo.png" alt="Handimania" class="hover"/> 
<h1> 
<img class="dark" src="http://www.handimania.com/wp-content/themes/handimania/images/logo-dark.png" alt="Handimania"/> 
</h1> 
<p id="tagline">Guides for Handmade, DIY &amp; Crafts Maniacs</p> 
</div>

來源

2013-06-18 Atcold

我認爲這是可能的這段代碼：

$('#logo .hover').hover(
    function(e) { 
     console.log('enter'); 
     $('#logo .hover').animate({opacity: 1}, "slow"); 
     $('#logo .dark').animate({opacity: 0}, "slow"); 
    }, 
    function(e) { 
     console.log('leave') 
     $('#logo .dark').animate({opacity: 1}, "slow"); 
     $('#logo .hover').animate({opacity: 0}, "slow"); 
    } 
);

這是在包含文件jquery.custom.js?ver=1.0，並表明這是一個jQuery的動畫，不一個CSS3動畫。

來源

2013-06-18 06:40:12 jfriend00

CSS3動畫風格的源代碼

回答

相關問題