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

他们使用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))

CCD_ 5似乎是123。

然后，他们使用一些函数在mouseover上将%s值从0更新为this.coords[0]。

缩小源

在程序中做这样的事情真的很难做到（但我不知道，也许他们确实做到了）。我怀疑他们只是在photoshop或其他什么地方制作了一个白色渐变环，并通过带有某种鼠标悬停功能的javascript将其放大。或者，他们可能只是制作了整个徽标的动画，并在用户将鼠标悬停在其上时循环使用

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

无论哪种方式，解决方案都不必像看上去那样复杂！