javascript - 关于谷歌浏览器的惊人标志效果

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 为它设置动画，方法是使用间隔并调整这些属性，如下所示：

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/

Answer 2

我修改了 ben 的答案以使用 jQueryanimate函数，如下所示：

$({ inner_radius : 0 }).animate({ inner_radius : 123 },{ step : function(A){
    var delta_radius = 15;
    $("#chrome").css("-webkit-mask","-webkit-gradient(radial, 17 17, "+inner_radius+", 17 17, "+(inner_radius+delta_radius)+", from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))");
}, duration : 2000 });

演示