关于谷歌铬的惊人标志效果

Question

更好地使用chrome来打开这个站点,任何webkit浏览器都可以这样做.

https://www.google.com/intl/en/chrome/browser/

当您将鼠标放在上面时,您可以看到有关该Chrome徽标的惊人效果.我下载了该页面的来源,但不幸的是迷失了它.

它使用非标准的CSS -webkit-mask,-webkit-gradient如下所示:

-webkit-mask: "-webkit-gradient(radial, 17 17, %s, 17 17, %s," + "from(rgba(0, 0, 0, 1))," + "color-stop(0.5, rgba(0, 0, 0, 0.2))," + "to(rgba(0, 0, 0, 1)))"

然后更改参数%s

如果徽标足够大,我们应该会看到一个白色圆圈从中心变得越来越大.

我试图使用jquery但不能成功.可以帮助一些人吗？

Answer 1

您可以使用jQuery为jQuery设置动画,使用间隔并调整这些属性,如下所示:

var radius = 0;

var interval = window.setInterval(function() {
    $("#chrome").css("-webkit-mask", "-webkit-gradient(radial, 17 17, " + radius + ", 17 17, " + (radius + 15) + ", from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))");
    radius++;
    if (radius === 124) {
        window.clearInterval(interval);
    }
}, 20);?

http://jsfiddle.net/sync/WHAXg/