时间戳

首页 > 解决方案 > 具有固定背景图像 css 的圆形动画

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

问题描述

我在 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;
}

在这个类中，背景图像也随着动画旋转。
我怎样才能修复背景图像？只是边框旋转和背景图像必须修复？

标签： css

解决方案

编写两个类并将样式拆分为两者。将一个 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>

推荐阅读