css - 具有固定背景图像 css 的圆形动画

Question

我在 css 中有一个带有背景图像的圆形动画:

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #4897D8; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  position: fixed;
  top: 50%;
  left: 40%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  animation: spin 2s linear infinite;
  background: url("../img/ExchangeHall.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

在这个类中背景图像也随着动画旋转。
如何修复背景图像？只是边框旋转而背景图像必须修复？

Answer 1

编写两个类并将样式拆分为两个类。将一个 div 放在另一个 div 中并应用样式

.loader-background {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #4897D8; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  position: fixed;
  top: 50%;
  left: 40%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  background: url("../img/ExchangeHall.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.loader-animation {
      animation: spin 2s linear infinite;
}


<div class="loader-background">
    <div class="loader-animation">
    ....
    </div>
</div>