Niesamowity efekt logo na temat google chrome

Question

Lepiej użyj chrome, aby otworzyć tę stronę, każda przeglądarka internetowa może również.

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

można zobaczyć niesamowity efekt o tym chromowanym logo kiedy można umieścić kursor myszy na jej temat. Pobieram źródło tej strony, ale niestety zagubiłem się w niej.

Wykorzystuje niestandardowe css -webkit-mask i -webkit-gradient jak poniżej:

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

następnie zmienić parametr% s

Jeśli logo jest na tyle duże, powinniśmy zobaczyć białe kółko coraz większe i większe od Centrum.

Próbowałem użyć jquery, ale nie mogę tego zrobić. Czy ktoś może pomóc?

Answer 1

można animować go z jQuery przy użyciu interwału i dostosowanie tych właściwości tak:

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

I zmodyfikowana odpowiedź Ben użyć jQuery animate funkcję tak:

$({ 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