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动画风格的源代码

回答

相关问题