我不知道如何实现延迟脉动文本的代码。我有一个背景图像，在它上面，我有 2 个不同的文本出现在不同的时间。第一个文本还可以，但是对于第二个文本，我有一个问题，我不知道如何让它在延迟出现的情况下脉动。
法典：
<?php
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
/*https://dynamicwallpaper.club/landing-vids/1.png*/
height: 100%;
/* Center and scale */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*still to use for wellcome*/
#test {
margin-top: 25px;
font-size: 8rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#test2 {
margin-top: 150px;
font-size: 2rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
animation-delay: 5s;
}/* This was missing*/
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<a href="skills.php">
<div class="bg tekst_slika">
<div id="test" class="centered">WELLCOME</div>
<div id="test2" class="centered">>> Press here to start <<</div>
</div>
</a>
</body>
</html>
提前感谢大家的帮助。
这里有一个小提琴，我认为它能给你带来解决方案：https://jsfiddle.net/v1pm2y8f/3/
您有几个语法错误需要修复，但在启动时将不透明度设置为 0 和使用animation-fill-mode: forwards;以在淡入完成后保留动画值。
.HTML
<div class="bg tekst_slika">
<div id="test" class="centered">WELCOME</div>
<div id="test2" class="centered">>> Press here to start <<</div>
</div>
.CSS
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("https://dynamicwallpaper.club/landing-vids/1.png");
/*https://dynamicwallpaper.club/landing-vids/1.png*/
height: 100%;
/* Center and scale */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
#test,
#test2 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*still to use for wellcome*/
#test {
margin-top: 25px;
font-size: 8rem;
opacity: 0;
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
animation-fill-mode: forwards;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#test2 {
margin-top: 150px;
font-size: 2rem;
opacity: 0;
-webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 5s;
animation-delay: 5s;
animation-fill-mode: forwards;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}