14

このサイトを開くにはchromeを使用する方がよいでしょう。どのWebkitブラウザでも可能です。

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

マウスを置くと、そのクロムロゴの驚くべき効果を見ることができます。そのページのソースをダウンロードしましたが、残念ながら迷子になりました。

非標準のcss-webkit-maskを使用し-webkit-gradient、以下のようになります。

-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を変更します

ロゴが十分に大きい場合は、中央から白い円がどんどん大きくなっているはずです。

jqueryを使おうとしましたが、うまくいきません。誰か助けてもらえますか？

4

2 に答える 2

16

間隔を使用し、次のようにこれらのプロパティを調整することで、jQueryでアニメーション化できます。

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/

于 2012-10-12T08:43:55.803 に答える
2

ベンの答えを次のようにjQueryanimate関数を使用するように変更しました。

$({ inner_radius : 0 }).animate({ inner_radius : 123 },{ step : function(A){
    var delta_radius = 15;
    $("#chrome").css("-webkit-mask","-webkit-gradient(radial, 17 17, "+inner_radius+", 17 17, "+(inner_radius+delta_radius)+", from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))");
}, duration : 2000 });

デモ

于 2012-10-12T08:51:15.710 に答える