The amazing logo effect about google chrome

Question

Better use chrome to open this site,any webkit browser may do too.

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

You can see the amazing effect about that chrome logo when you put mouse on it. I download the source of that page, but unfortunately got lost in it.

It uses non-standard css -webkit-mask and -webkit-gradient like below:

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

then change the parameter %s

If the logo is big enough we should see a white circle getting bigger and bigger from the center.

I tried to use jquery but cannot make it.Can someone help?

Answer 1

You can animate it with jQuery by using an interval and adjusting those properties like so:

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/