我使用 html 和 css 编写了一个打字动画,它会写一个句子并在句子结束后循环。
目前循环在结束后立即恢复。我希望动画在最后一个省略号 (...) 上保持闪烁插入符号大约 3 秒,然后再恢复打字动画。我不知道该怎么做。
.typewriter h1 {
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .3em;
font-weight:bold;
animation: typing 5s steps(40, end), blink-caret .75s step-end infinite;
animation-iteration-count: infinite;
}
@keyframes typing {
from {
width: 0
}
to {
width: 16.5em
}
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to {
border-color: transparent
}
50% {
border-color: orange;
}
}
@media screen and (max-width: 800px){
.typewriter h1 {
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .3em;
font-weight: bold;
animation: typing 5s steps(40, end), blink-caret .75s step-end infinite;
animation-iteration-count: infinite;
font-size: 20px;
}
@keyframes typing {
from {
width: 0
}
to {
width: 16.5em
}
}
@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange;
}
}
}
<div class="container">
<div class="typewriter">
<h1>Model Running . . .</h1>
</div>
</div>