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

3

我不知道是什么让你认为你失败了。您的动画确实有效：当您将鼠标放在图像上时，您可以在字母“m”上看到“眩光”。

为什么它不起作用

让您的动画完全不令人印象深刻的是您只定义了 3 个关键帧：

  • at 0%：你永远没有机会看到这个：它设置了一个起点，但是一旦动画开始你就超过了 0%，所以它会移动到下一个关键帧。将其更改为例如 5% 将使其可观察到。
  • at 50%：这是我们可以在字母“m”上观察到的“眩光”（它实际上是您的动画正在运行的唯一视觉指示）。
  • at 100%：你在一张只有 123px 宽的图像上将半径设置为 138px，所以我们自然无法观察到任何东西。

如何使它工作

为了使其工作，您需要指定更多关键帧（因为该属性-webkit-mask-image不在动画CSS 属性列表中）。
因此，使用 CSS 实现这样的动画可能不是一个好主意。想象一下必须为 webkit 浏览器定义 50 个关键帧，为 Firefox 定义 50 个，为 IE 定义 50 个等等。定义较少的关键帧会导致动画不太流畅。
另一方面，您只需要在 JavaScript 中为每个浏览器定义1 个函数（而不是 50 个关键帧！）。

我准备了一个简短的演示，它在相同的图像上具有 CSS 驱动和 JS 驱动的悬停效果，以展示平滑度和代码行数的差异。（我在 CSS 中定义了 21 个关键帧。另外，因为它只是一个演示，所以我只使它与 webkit 兼容。）

一些统计数据：

     | 关键帧 | 代码行
-----+-----------+---------------
 CSS | 21 | ~150
  JS | 50 | ~25

演示的源代码可以在这里找到。

结论

它可以使用 CSS 或 JS 来完成。
但是JS更短更流畅！

于 2013-06-06T20:27:58.733 回答
0

因为框架的粒度比 js 大，所以 css 并不微妙。

于 2013-06-07T03:12:01.420 回答
0

这有点酷，可惜它不兼容跨浏览器。您可能可以通过动画实现相同的效果，并且更加兼容跨浏览器。

于 2013-06-06T08:11:55.967 回答