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>

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

1 个答案: