html - 如何使单个图像在 CSS 中具有动画效果？

Question

我正在尝试从我的 html 网站上的许多图像中制作一个具有旋转动画的图像。到目前为止，当我尝试这样做时，旋转动画会应用于网站上的所有图像。这是我的一些代码。 (我在网站上还有很多其他图片，我只是想让 torqafflogo.png 图片旋转。)

HTML:

<center> <img src="torqafflogo.png" width="215" height="215"> </center>

CSS:

 img {
  border-radius: 0%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

Answer 1

将id 添加到此img，然后用# 将img 选择器替换为您的id 选择器。

HTML:

<center><img id="torqafflogo" src="torqafflogo.png" width="215" height="215"></center>

CSS:

#torqafflogo {
  border-radius: 0%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}

#torqafflogo:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}