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

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>