结论
今天我注意到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达到同样的目的，但我失败了，正如链接上的代码。
我问的是为什么，以及我如何才能做到这一点。如果你能告诉我这背后的原因，那就太好了。
我的英语很差，很抱歉。
我不知道是什么让你觉得你失败了。你的动画确实有效:当你把鼠标放在图像上时，你可以看到字母"m"上的"眩光"。
为什么不工作
让你的动画一点都不令人印象深刻的是你只定义了3个关键帧:
- at 0%:你从来没有机会看到这个:它设置了一个起点，但一旦动画开始，你就超过了0%，所以它移动到下一个关键帧。例如，将其更改为5%将使其可观察到。
- 在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 | ~150j | 50 | ~25之前演示的源代码可以在这里找到。
结论
既可以使用CSS也可以使用JS。
但是JS更短更流畅!
很酷，可惜它不能跨浏览器兼容。你也许可以用动画来达到同样的效果，并且跨浏览器兼容。
因为框架的粒度比js大，所以css并不微妙