将样式属性添加到从另一种样式调用的图像

Question

这是为加载图像时添加旋转/加载图标。

我正在使用的现有代码调用一个动画 .gif 图像作为图像缩略图“后面”的背景图像，因此加载图标在缩略图加载到顶部之前是可见的。但我想用更高质量的 .png 替换 .gif 并添加 CSS 以使其旋转。这是一个更干净的外观，但我不知道如何或是否可以将 CSS 样式添加到 background: url(img/loading.png)

这是原始的 HTML 代码：

<div style="position: absolute; display: block; background: url(img/loading.png) no-repeat center center; top: 0px; left: 0px; width: 25%; height:25%;">

我想将this CSS code 添加到 .png 以使其旋转：

.loading {
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
@-moz-keyframes spin { 100% { 
-moz-transform:rotate(360deg); 
    }
}
@-webkit-keyframes spin { 100% { 
-webkit-transform:rotate(360deg); 
    }
}
@keyframes spin { 100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
    }
}

结合这些以使我的背景 .png 图像旋转的最佳方法是什么？

Answer 1

您可以使用背景为 div 设置动画，您只需向其添加加载类并使用单独的类向其添加其他样式，例如背景 url、宽度、高度、位置等...

.load-style {
  height: 64px;
  width: 64px;
  background: url(http://www.jasonkenison.com/uploads/blog/loading.png) no-repeat center center;
  background-size: 100%;
  position: absolute;
}
.loading {
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<div class="loading load-style"></div>

Answer 2

您没有将动画类添加到 HTML。在您的 CSS 中，您有一个名为“加载”的类，但 HTML 不知道要制作什么动画。在您的 div 中 style="" 标签之前添加 class="loading" ，它会工作，除了你的 CSS 工作。