0

今日、Chrome のダウンロード ページ ( chrome ) にホバー効果のアイコンがあることに気付きました。とてもクールです。以下のコードのように、css3 結合 js を使用してこの効果を実現していることに気付きました。

    function maskImg() {
        var requestAnimationFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame,
                startTime = window.mozAnimationStartTime || Date.now();
        var MAX = 138, img = this, maxTime = 1500;
        requestAnimationFrame(function (timestamp) {
            var drawStart = (timestamp || Date.now()),
                    diff = drawStart - startTime;
            img.style.cssText = ['-webkit-mask: -webkit-gradient(radial, 17 17, ' ,
                Math.floor(diff * MAX / maxTime) ,
                ', 17 17, ' ,
                Math.floor(diff * MAX / maxTime) +15,
                ', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));'].join('');
            if (maxTime > diff)requestAnimationFrame(arguments.callee);
        });
    }

そして、webkit-animation と @-webkit-keyframes と -webkit-mask で同じ目的を達成できるかどうか疑問に思いますが、linkのコードのように失敗します。
なぜ、どのようにこれを達成することができるのかを尋ねています。この背後にある理由を教えていただければ、それは素晴らしいことです。

私の英語はとても下手です、ごめんなさい。

4

3 に答える 3

0

フレームはjsよりも粒度が大きいので、cssは微妙ではありません。

于 2013-06-07T03:12:01.420 に答える