javascript - 试图让页面上的每张图片都为 Chrome 扩展程序旋转？

Question

我想弄清楚如何让我的 javascript 找到页面上的每个 img 标签，然后为其设置动画以使其连续旋转？到目前为止，我只创建了一个变量来查找每个 img 标签:

var DI= document.getElementsByTagName("img");

如有任何帮助，我们将不胜感激!

编辑:澄清一下，这是我正在制作的 chrome 扩展程序，因此它必须将自身注入(inject)到现有网站中。

edit 2:好的，我知道 CSS 动画是最简单的方法。但是，如何在通过 Javascript 查找网页上的所有图像标签与实际的 CSS 动画本身之间建立联系(以便它找到所有图像然后使上述图像旋转)？

Answer 1

不需要javascript。您可以为此使用 CSS 动画。

创建一个名为spin的关键帧动画

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

使用此动画设置图像标签的样式并无限循环。

img {
    animation: 2000ms spin infinite linear;
}

Fiddle

如果您不希望网站中的每个 img 标签都旋转，而是希望它只在特定页面上旋转，请使用这些设置来设置类样式，而不是直接使用 img 元素。

编辑:

如果您想通过 javascript 启动旋转而不是将样式直接应用于 CSS 中的所有图像，请设置一个类并通过 javascript 添加该类。

CSS

.spinning {
    animation: 2000ms spin infinite linear;
}

Javascript

var imgs = document.getElementsByTagName('img');

for(var i = 0; i < imgs.length; ++i){
    imgs[i].className += " spinning";
}

Fiddle