第一次堆疊溢位問題在這里提問！我有點頭疼。
這就是我想要做的： 創建一個登陸頁面，其中橫幅影像淡入，然后文本淡入。所以影像在 5 秒內淡入，然后文本在接下來的 5 秒內淡入。到 10秒一切都應該是可見的。應該很容易。
問題： 文本似乎不想在我想要的時候淡入。
我嘗試過的： 起初它只是隨著橫幅影像逐漸消失。然后我將文本疊加的不透明度設定為不透明度 0，然后向 ID 添加了影片延遲并且該作品有效，但之后文本疊加回傳不透明度 0，我又回到了我開始的地方。
HTML
<div id="splashPage" class="fade-in">
<div id="splashOverlay" class="fade-in-slow">
</div>
</div>
CSS
.fade-in {
animation: fadeIn 5s;
}
.fade-in-slow {
animation: fadeIn 5s;
animation-delay: 5s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#splashPage {
background-image: url("../img/HotDQBanner.png");
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
background-position: center;
position: relative;
top: 0;
left: 0;
}
#splashOverlay {
opacity: 0;
background-image: url("../img/splashOverlay.png");
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
background-position: center;
top: 0;
left: 0;
}
我覺得我真的很接近這一點，但決定繼續尋求幫助。任何支持將不勝感激，如果需要更多資訊，請告訴我。
uj5u.com熱心網友回復：
如果您希望文本在主 div 5 秒后淡入。然后在 css 選擇器中 .fade-in-slow 制作影片：fadeIn 10s;
uj5u.com熱心網友回復：
你很親近。您唯一缺少的是animation-fill-mode。
.fade-in {
animation: fadeIn 5s;
}
.fade-in-slow {
animation: fadeIn 5s 5s both;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#splashPage {
height: 100vh;
background: red;
}
#splashOverlay {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}<div id="splashPage" class="fade-in">
<div id="splashOverlay" class="fade-in-slow">
HELLO!
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/396704.html