只有与CSS，循环30图像一个接一个无限的时间创造一个燃烧的火的效果

kulphzqa 于 2023-05-02 发布在其他

关注(0)|答案(4)|浏览(126)

对不起，如果这个问题重复另一个，但我没有找到结果，只有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，而是类，仍然不起作用。我想，我做的每件事都是错的，但我需要有人给我指明方向。
提前感谢大家

css

来源：https://stackoverflow.com/questions/57346992/only-with-css-looping-30-images-one-after-another-for-infinite-time-creating-a

4条答案

按热度按时间

rryofs0p1#

不幸的是，背景图像不是一个可以通过CSS动画的属性。为了达到这个效果，您别无选择，只能使用脚本。参考文献：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

赞(0）回复(0）举报 2023-05-02

wnrlj8wa2#

您的错误是在img元素上使用了background-image属性。您可以在am img元素上使用background-image，但在这种情况下，背景图像将被实际图像隐藏，除非它有透明部分，而在您的情况下没有。放弃img元素，在常规div上使用background-image。
当Kornelijus说背景图像不能被动画化时，他抛出了一个有点曲线球。这只是意味着它不能被改变 * 逐渐 *，因为它说，在页面上，他链接到。无论如何，逐渐改变背景图像的概念是没有意义的--它要么是一个图像，要么是另一个图像。
运行下面的代码片段以查看实际应用中的概念。我减少了关键帧的数量，并使用了内联图像，这样你就看不到图像的变化了。

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

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

@keyframes myAnimation {
       0%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigwLDAsMjU1KTsiIC8+PC9zdmc+")}
       20%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigyNTUsMCwwKTsiIC8+PC9zdmc+")}
       40%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigwLDAsMjU1KTsiIC8+PC9zdmc+")}
       60%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigwLDAsMjU1KTsiIC8+PC9zdmc+")}
       80%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigyNTUsMCwwKTsiIC8+PC9zdmc+")}
       100%{ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzE1IiBoZWlnaHQ9IjY1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIzMTUiIGhlaWdodD0iNjUiIHN0eWxlPSJmaWxsOnJnYigwLDAsMjU1KTsiIC8+PC9zdmc+")}
 }

<div class="box4"></div>

我不建议用这种方式制作动画。视频会更好。图像只有在第一次呈现在页面上时才会被请求，因此如果您引用的是外部图像，则它们将无法在动画的第一个循环中及时下载。

赞(0）回复(0）举报 2023-05-02

kmb7vmvb3#

谢谢你们情况是，这是一个任务的要求是使一个动画与30图像我得到了，我也可以使用Sass/少/笔，但我最近对编程感兴趣，还没有对那些CSS预处理器的研究（动画可以与preporcessors？）。由于没有具体的指导，我可以将这些图像制作成礼物并将其分配给div

赞(0）回复(0）举报 2023-05-02

gzszwxb44#

好吧，如果你可能有一个“可管理”的图片量，而不是赞助商标志显示在某个页面上，我建议你继续使用CSS。
在这个例子中，我使用5个标志图片
然后，对于每一个，我都分配了一个animationDuration，比方说，60 s（因为60，注意，是12 s的倍数）。这是什么数学！！！
因此，对于每张图像，我确实创建了一个专用的@关键帧（每张12秒，将100%分成5部分），以及不透明度逻辑，以重现明暗处理的淡入淡出效果;
请看下面的CSS代码：

@keyframes spnLgs1 {

    0% { opacity: 0; }
    6% { opacity: 1; }
    14% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }

}
@keyframes spnLgs2 {

    0% { opacity: 0; }
    20% { opacity: 0; }
    26% { opacity: 1; }
    34% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }

}
@keyframes spnLgs3 {

    0% { opacity: 0; }
    40% { opacity: 0; }
    46% { opacity: 1; }
    54% { opacity: 1; }
    60% { opacity: 0; }
    100% { opacity: 0; }

}
@keyframes spnLgs4 {

    0% { opacity: 0; }
    60% { opacity: 0; }
    66% { opacity: 1; }
    74% { opacity: 1; }
    80% { opacity: 0; }
    100% { opacity: 0; }

}
@keyframes spnLgs5 {

    0% { opacity: 0; }
    80% { opacity: 0; }
    86% { opacity: 1; }
    94% { opacity: 1; }
    100% { opacity: 0; }

}

然后，我设置了两个类CSS值

/* || .main_AccountAccessArea_formRibbon_footer_sponsorLogos */
.main_AAA_frmRib_ftr_spnLgs {

    position: absolute;
    height: 4vh;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* animation */
    opacity: 0;
    animation-duration: 60s;
    animation-iteration-count: infinite;

}

以及每个ID的相对@keyframe名称

#spnLgs-Adidas {
    animation-name: spnLgs1;
}
#spnLgs-GiorgioArmani {
    animation-name: spnLgs2;
}
#spnLgs-IPCC {
    animation-name: spnLgs3;
}
#spnLgs-Montblanc {
    animation-name: spnLgs4;
}
#spnLgs-Valsir {
    animation-name: spnLgs5;    
}

结果：
没有JS，一个轻，有效的，同样光荣的变化图片着色器。
就是这样

赞(0）回复(0）举报 2023-05-02

我来回答

只有与CSS，循环30图像一个接一个无限的时间创造一个燃烧的火的效果

4条答案

相关问题

热门标签

最新问答