关于谷歌Chrome的惊人的标志效果

问题描述

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

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

您可以看到惊人的效果，当你把鼠标放在它的铬标志。

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);​

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