亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<p>我正在嘗試在一個(gè)無(wú)限循環(huán)中對(duì)6個(gè)圖像進(jìn)行動(dòng)畫(huà)。 </p> <p>當(dāng)我新增第6個(gè)圖片並且新增「poster」類別時(shí)，沒(méi)有任何圖片顯示，但如果我省略將「poster」類別新增至第6列（或影像），則前5個(gè)影像將正確顯示和動(dòng)畫(huà)。 </p> <p>我不明白為什麼會(huì)發(fā)生這種情況。 </p> <p>正如您所看到的，「poster」類別不在第六列中，所以我的程式碼可以工作，但是一旦我添加了那個(gè)類，它就停止工作了。 </p> <p>（我正在使用bootstrap 5，但我確定這與此問(wèn)題無(wú)關(guān)，因?yàn)槌淌酱a如我所示，完美地複製了這個(gè)問(wèn)題）</p> <pre class="brush:css;toolbar:false;">@keyframes moves { to { background-position: -100vw 80%; } } .galeria { position: relative; overflow: hidden; } .poster { position: absolute; animation: moveAcross 6s linear infinite; } .poster-1 { animation-delay: -0s; animation-duration: 6s; } .poster-2 { animation-delay: -1s; animation-duration: 6s; } .poster-3 { animation-delay: -2s; animation-duration: 6s; } .poster-4 { animation-delay: -3s; animation-duration: 6s; } .poster-5 { animation-delay: -4s; animation-duration: 6s; } .poster-6 { animation-delay: -5s; animation-duration: 6s; } @keyframes moveAcross { 0% { left: -300px; } 100% { left: 110%; } }</pre> <pre class="brush:html;toolbar:false;"><div class="row justify-content-center"> <div class="galeria"> <div class="col poster poster-1"> <img src="images/posters/poster1.jpg" class="img-fluid" /> </div> <div class="col poster poster-2 "> <img src="images/posters/poster2.jpg" class="img-fluid" /> </div> <div class="col poster poster-3"> <img src="images/posters/poster3.jpg" class="img-fluid" /> </div> <div class="col poster poster-4 "> <img src="images/posters/poster4.jpg" class="img-fluid" /> </div> <div class="col poster poster-5"> <img src="images/posters/poster5.jpg" class="img-fluid" /> </div> <div class="col poster-6"> <img src="images/posters/poster6.jpg" class="img-fluid" /> </div> </div> </div></pre>

<div style="visibility: hidden;">
    <img src="https://soft.com.mx/test/images/posters/poster6.jpg" class="img-fluid" />
</div>

@keyframes moves {
to {
    background-position: -100vw 80%;
}
}

.galería {
position: relative;
overflow: hidden;
}

.poster {
position: absolute;
animation: moveAcross 6s linear infinite;
}
.poster-1 {
animation-delay: -0s;
animation-duration: 6s;
}
.poster-2 {
animation-delay: -1s;
animation-duration: 6s;
}
.poster-3 {
animation-delay: -2s;
animation-duration: 6s;
}
.poster-4 {
animation-delay: -3s;
animation-duration: 6s;
}
.poster-5 {
animation-delay: -4s;
animation-duration: 6s;
}
.poster-6 {
animation-delay: -5s;
animation-duration: 6s;
}

@keyframes moveAcross {
0% {
    left: -300px;
}
100% {
    left: 110%;
}
}

<link  rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row justify-content-center">
    <div class="galeria">
        <div class="col poster poster-1">
            <img src="https://picsum.photos/300/300?random=1" class="img-fluid" />
        </div>
        <div class="col poster poster-2 ">
            <img src="https://picsum.photos/300/300?random=2" class="img-fluid" />
        </div>
        <div class="col poster poster-3">
            <img src="https://picsum.photos/300/300?random=3" class="img-fluid" />
        </div>
        <div class="col poster poster-4 ">
            <img src="https://picsum.photos/300/300?random=4" class="img-fluid" />
        </div>
        <div class="col poster poster-5">
            <img src="https://picsum.photos/300/300?random=5" class="img-fluid" />
        </div>
        <div class="col poster poster-6">
            <img src="https://picsum.photos/300/300?random=6" class="img-fluid" />
        </div>
    </div>
</div>