Question

我有一个由3张独立图像组成的背景，我想为所有3张图像添加旋转动画。如果我为number-bg类设置动画，则所有3张图像都会旋转。我希望每个图像的旋转速度都不同。最好的方法是什么？

mycode

<style>
  body {
    height: 100%;
  }

  .number-bg {
    height: 1000px;
    background-image: url(https://i.imgur.com/BZrswvf.png),
      url(https://i.imgur.com/XJ9zZeA.png),
      url(https://i.imgur.com/RJDk9uS.png);
    background-repeat: no-repeat;
    background-position: center;
  }
</style>

<body>
  <div class="number-bg">
  </div>
</body>

图片：

Answer 1

查看代码以不同的速度旋转每个图像。

.number{height: 1000px;
        background-repeat: no-repeat;
        background-position: center;}

.no-9 {
    background-image: url(https://i.imgur.com/BZrswvf.png);
  
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite
  }

.no-6 {
    background-image: url(https://i.imgur.com/XJ9zZeA.png);
  
    -webkit-animation:spin 6s linear infinite;
    -moz-animation:spin 6s linear infinite;
    animation:spin 6s linear infinite
  }

.no-3 {
    background-image: url(https://i.imgur.com/RJDk9uS.png);
  
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s 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); }

  <div class="number no-9">
    <div class="number no-6">
        <div class="number no-3"></div>
    </div>
    </div>

根据您的意愿更改旋转速度。

如何对多个背景图像进行动画处理？

1 个答案: