Google क्रोम

Question

के बारे में अद्भुत लोगो प्रभाव इस साइट को खोलने के लिए बेहतर क्रोम का उपयोग करें, कोई भी वेबकिट ब्राउज़र भी ऐसा कर सकता है।

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

आप जब आप इसे पर माउस डाल कि क्रोम लोगो के बारे में अद्भुत प्रभाव देख सकते हैं। मैं उस पृष्ठ का स्रोत डाउनलोड करता हूं, लेकिन दुर्भाग्यवश इसमें खो गया है।

यह का उपयोग करता है गैर मानक सीएसएस -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

मैं बेन के जवाब संशोधित इस तरह 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 }); 

demo