Question

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

我现有的代码使用调用动画.gif图片作为背景图片＆＃34;＆＃34;＆＃34;图像缩略图，因此加载图标可见，直到缩略图加载到顶部。但我想用更高质量的.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设置动画，只需要向其添加加载类，并使用单独的类将其他样式添加到其中，如背景网址，宽度，高度，位置等......

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您没有将动画类添加到HTML中。在你的CSS中你有一个名为＆＃34; loading＆＃34;但HTML并不知道动画是什么。在你的div之前的风格=＆＃34;＆＃34; tag add class =＆＃34; loading＆＃34;它将起作用，除了你的CSS工作。

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

2 个答案: