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

为该特定图片添加class / id，然后通过CSS将样式添加到具有该特定class / id

的图片中

例如（使用类）：

HTML：

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

CSS：

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

使用id，如果这是现在唯一的图像，并且在可预见的将来您希望应用这些动画。

如果您使用class，则无论给定哪个图片，特定class都会有这些动画。

就个人而言，我更倾向于使用class，因为这时功能可以很容易地扩展到更多这样的图像。

Answer 2

CSS : 
body {
  background: #24aecd;
}

.monster {
  width: 190px;
  height: 240px;
  margin: 2% auto;
  background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
  animation: play .8s steps(10) infinite;
}

@keyframes play {
    100% { background-position: -1900px; }
}

HTML : 
<div class="monster"></div>

Check wokring example here  :https://codepen.io/Guilh/pen/yldGp

Answer 3

将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);
}

如何使单个图像在CSS中有动画？

3 个答案: