为许多背景图像中的一个背景图像设置动画答案

【问题标题】：Animate one background-image out of many background-images为许多背景图像中的一个背景图像设置动画
【发布时间】：2023-04-05 02:11:01
【问题描述】：

我在 CSS 中实现了 2 个背景图像，以根据 Photoshop 布局获得混合模式样式。我也做对了。但现在我只想为其中一张图片制作动画。

.home
    background:
      image: url(https://i.stack.imgur.com/XZDsP.jpg), url(https://img.clipartfest.com/d840c9cfc1786dc7013443ac7638dde0_halloween-clip-art-free-spider-spider-web-clipart-png_500-463.png)
      blend-mode: color-dodge
      repeat: no-repeat
      size: cover, contain
      position: 0, center
    height: 100vh

你们知道怎么做吗？

检查此codepen。我想为前景图像（蜘蛛网）旋转无限动画

【问题讨论】：

标签： jquery html css

【解决方案1】：

只需在您的<section> 中定义另一个分配给新<div> 的类

试试这个。

<section class="home">
    <div class="rotating"></div>
</section>

定义这个css

/* rotation animation */
@-webkit-keyframes rotate {
  from { -webkit-transform:rotate(0deg); }
  to { -webkit-transform:rotate(360deg); }
}

@-moz-keyframes rotate {
  from { -moz-transform:rotate(0deg); }
  to { -moz-transform:rotate(360deg); }
}

@-ms-keyframes rotate {
  from { -ms-transform:rotate(0deg); }
  to { -ms-transform:rotate(360deg); }
}

@-o-keyframes rotate {
  from { -o-transform:rotate(0deg); }
  to { -o-transform:rotate(360deg); }
}

.rotating {
  position:absolute;
  width:100%;
  height:100%;
  background-image: url(https://img.clipartfest.com/d840c9cfc1786dc7013443ac7638dde0_halloween-clip-art-free-spider-spider-web-clipart-png_500-463.png);
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-transform-origin: 50% 50%;
  -moz-animation-name: rotate;
  -moz-animation-duration: 1.5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-transform-origin: 50% 50%;
  -ms-animation-name: rotate;
  -ms-animation-duration: 1.5s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-transform-origin: 50% 50%;
  -o-animation-name: rotate;
  -o-animation-duration: 1.5s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

希望对你有帮助

【讨论】：

我认为你没有很好地理解我的问题。我需要的是我想为其中一个背景图像添加动画而不影响背景混合模式风格。我更新了@987654321 @链接检查一下..然后你就会明白了。