时间戳

首页 > 解决方案 > 仅使用 CSS，无限次循环播放 30 张图像，创建燃烧的火焰效果

html - 仅使用 CSS，无限次循环播放 30 张图像，创建燃烧的火焰效果

问题描述

抱歉，如果这个问题重复另一个问题，但我没有找到仅使用 CSS 来创建此效果的结果。

我有 30 张图像，我需要用它们来创建燃烧效果（因此它们需要显示在相同的 div 内容中并无限循环。

我尝试使用百分比并添加浏览器前缀。也具有“不透明度”属性和“淡入”，但我只有一张图像可以重复。

.box4 {
  grid-column: 2/3;
  grid-row: 2/3;
}

.box4 img {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 60%;
  height: 80px;
  margin-left: 20%;
  margin-top: 5%;
  animation-name: myAnimation;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation {
  0% {
    background-image: url(../fireImages/fire_1.png)
  }
  5% {
    background-image: url(../fireImages/fire_2.png)
  }
  10% {
    background-image: url(../fireImages/fire_3.png)
  }
  15% {
    background-image: url(../fireImages/fire_4.png)
  }
  20% {
    background-image: url(../fireImages/fire_5.png)
  }
  28% {
    background-image: url(../fireImages/fire_6.png)
  }
  32% {
    background-image: url(../fireImages/fire_7.png)
  }
  36% {
    background-image: url(../fireImages/fire_8.png)
  }
  40% {
    background-image: url(../fireImages/fire_9.png)
  }
  45% {
    background-image: url(../fireImages/fire_10.png)
  }
  49% {
    background-image: url(../fireImages/fire_11.png)
  }
  53% {
    background-image: url(../fireImages/fire_12.png)
  }
  58% {
    background-image: url(../fireImages/fire_13.png)
  }
  62% {
    background-image: url(../fireImages/fire_14.png)
  }
  64% {
    background-image: url(../fireImages/fire_15.png)
  }
  68% {
    background-image: url(../fireImages/fire_16.png)
  }
  72% {
    background-image: url(../fireImages/fire_17.png)
  }
  76% {
    background-image: url(../fireImages/fire_18.png)
  }
  78% {
    background-image: url(../fireImages/fire_19.png)
  }
  82% {
    background-image: url(../fireImages/fire_20.png)
  }
  84% {
    background-image: url(../fireImages/fire_21.png)
  }
  86% {
    background-image: url(../fireImages/fire_22.png)
  }
  88% {
    background-image: url(../fireImages/fire_23.png)
  }
  90% {
    background-image: url(../fireImages/fire_24.png)
  }
  92% {
    background-image: url(../fireImages/fire_25.png)
  }
  94% {
    background-image: url(../fireImages/fire_26.png)
  }
  96% {
    background-image: url(../fireImages/fire_27.png)
  }
  98% {
    background-image: url(../fireImages/fire_28.png)
  }
  99% {
    background-image: url(../fireImages/fire_29.png)
  }
  100% {
    background-image: url(../fireImages/fire_30.png)
  }
}
<div class="box4"><img src="assets/fireImages/fire_1.png"></div>

我也尝试过创建 css 类，所以图像 src 不是 URL，而是类，但仍然不起作用。我在做，我猜，一切都错了，但我需要有人给我指出一个方向。

提前谢谢大家

标签： htmlcss

解决方案

不幸的是，背景图像不是可以通过 CSS 设置动画的属性。为此，您别无选择，只能使用脚本。参考：https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

推荐阅读