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

更好地使用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/

Answer 2

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

 $({ 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 }); 

演示