如何复制谷歌Chrome网页的javascript徽标效果

Question

在http://www.google.com/chrome/上，如果您将鼠标悬停在Chrome徽标上，则会出现javascript动画。

我试图查看代码，它看起来像是一些-webkit-gradient效果，但我无法复制它。

知道他们是怎么做到的吗？

贝斯茨

Answer 1

他们使用webkit-gradient作为webkit-mask。

默认值：
-webkit-mask: -webkit-gradient(radial, 17 17, 123, 17 17, 138, from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));

调用函数来更新它：
this.d.style.webkitMaskImage = pa("-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)))", Math.floor(this.coords[0]), Math.floor(this.coords[0] + 15))

this.coords[0]似乎是123.

然后他们使用某个功能将%s上的0值更新为this.coords[0]上的mouseover。

minified sources

Answer 2

在程序中做这样的事情实际上很难实现（但我不知道，也许他们确实做到了）。我怀疑他们只是在Photoshop或其他任何东西制作了一个白色渐变的戒指，并通过javascript放大了某种鼠标悬停功能。或者他们只是制作了整个徽标的动画，并在用户将鼠标悬停在它上面时循环显示。

以下是一些可能对鼠标悬停部分有帮助的链接。 http://www.w3schools.com/jsref/event_onmousedown.asp http://www.w3schools.com/jsref/event_clientx.asp

无论哪种方式，解决方案都不必像看起来那么复杂！