Google Chrome hakkında harika logo etkisi

Question

Bu siteyi açmak için daha iyi bir krom kullanın, herhangi bir webkit tarayıcısı da yapabilir. bunun üzerine fare koyduğunuzda

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

O krom logosu hakkında inanılmaz etkisini görebilirsiniz. Bu sayfanın kaynağını indiriyorum ama maalesef içinde kaybolmuş.

Bu standart dışı css -webkit-mask ve -webkit-gradient aşağıda gibi kullanır: o zaman değiştirmek

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

parametre% s

logosu biz beyaz bir daire gelen giderek büyüyor görmelisiniz yeterince büyük değilse Merkez.

jquery'yi kullanmayı denedim ama yapamıyorum.Can yardımcı oluyor mu?

Sen bir aralık kullanarak ve şöyle bu özellikleri ayarlayarak jQuery ile canlandırabilirsiniz

Answer 1

: Böyle jQuery animate işlevini kullanmak için ben cevabını modifiye

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

:

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