El increíble efecto de logotipo sobre google chrome

Question

Mejor uso de Chrome para abrir este sitio, cualquier navegador de webkit puede hacerlo también.

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

Se puede ver el efecto sorprendente de que el logotipo de cromo cuando se pone el ratón sobre ella. Descargo la fuente de esa página, pero desafortunadamente me perdí en ella.

Utiliza CSS no estándar -webkit-mask y -webkit-gradient, como a continuación:

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

continuación, cambie el parámetro% s

Si el logotipo es lo suficientemente grande como deberíamos ver un círculo blanco cada vez más grande y más grande de el centro

Intenté usar jquery pero no puedo hacerlo. ¿Alguien me puede ayudar?

Answer 1

Puede animarlo con jQuery mediante el uso de un intervalo y ajustar las propiedades de este modo:

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

he modificado la respuesta de ben utilizar la función jQuery animate así:

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

demo