尝试为Chrome扩展程序在页面上旋转每个图像？

Question

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

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

任何帮助将不胜感激！

编辑：为了澄清一下，这是针对我正在制作的Chrome扩展程序，因此它必须将自己注入到已有的网站中。

编辑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