Question

浏览Handimania网站时，我意识到当鼠标悬停时，标题会发出一次脉冲。现在我知道这可能是用CSS或CSS3完成的样式动画（我是否正确？）但我不太确定如何看到源代码。

到目前为止，当一个吸引人的静态网页突然出现在我面前时，我可以扫描它的 html 以获取其秘密和见解。现在我发现自己无法以同样的方式接近这个动态内容。到目前为止我能说的是，在某个地方，应该有一个名为hover的类，它从0％到100％逐渐消失，并返回到0％的氰基PNG标题，在静态灰色图像上具有透明背景

这是我能走得最远的地方

<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>

Answer 1

我认为这可能就是这段代码：

$('#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动画。

CSS3动画风格的源代码

1 个答案: