时间戳

首页 > 解决方案 > 在叠加层中为背景图像设置动画

css - 在叠加层中为背景图像设置动画

问题描述

我按照另一个 stackoverflow 答案在我的网页中创建了一个加载叠加层。我的覆盖类为：

.overlay {
  display:    none;
  position:   fixed;
  z-index:    1000;
  top:        0;
  left:       0;
  height:     100%;
  width:      100%;
  background: rgba( 255, 255, 255, .8 )
              url('../images/loaderIcon.png')
              50% 50%
              no-repeat;
}

我还有一个 css 类，它可以动画它附加到旋转的任何东西：

.spinning {
  animation: spin 1s infinite linear;
  -webkit-animation: spin2 1s infinite linear;
}

现在，在 stackoverflow 的答案中，他们使用了来自 imgur 的 .gif 文件。我创建了我自己想要使用的图像，我想让它动画旋转。显然，只是将这个类附加到覆盖类上会使整个覆盖层旋转（诚然，这很有趣）。有没有办法只隔离背景 URL 源以旋转？有没有一种简单的方法可以将其转换为 gif 并使用另一个程序对其进行动画处理？（苹果系统）

标签： cssanimated-gif

解决方案

推荐阅读