关于谷歌Chrome的惊人的标志效果 [英] The amazing logo effect about google chrome

问题描述

更好地使用chrome打开此网站，任何webkit浏览器都可以这样做。

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

https://www.google.com/intl/zh-CN/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.

它使用非标准css -webkit-mask 和 -webkit-gradient 如下：

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

然后更改参数％s

如果徽标足够大，我们可以看到一个白色圆圈变得越来越大中心。

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

我试图使用jquery但不能make it。有人帮助？

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

推荐答案

您可以使用jQuery通过使用间隔并调整这些属性来使其动画化：

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/

这篇关于关于谷歌Chrome的惊人的标志效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！