如何让光标在完成第二行时闪烁-使用CSS的打字效果

Question

我正试图为网页(黑色背景(在两行上实现打字效果，一旦第二句话打出来，我就无法执行光标闪烁。

我已经发布了HTML和CSS代码。任何帮助我纠正错误的地方都会有所帮助。

HTML:

<div class="typewriter">
<h1>Hi,</h1>
<h2>This is <span style="color: orange">ABC.</span></h2></div> 

CSS：

.typewriter h1 {
color: #fff;
font-family: 'DM Mono', monospace;
overflow: hidden;
font-size: 80px;
border-right: .15em solid black;
white-space: nowrap;
letter-spacing: .15em;
width: 4ch;
animation: typing 2.5s steps(4, end), blink-caret .75s step-end 4;
}
.typewriter h2 {
color: #fff;
font-family: 'DM Mono', monospace;
font-size: 40px;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid orange;
width: 20ch;
animation: typing2 2s steps(20, end), blink-caret 1s step-end;
animation-delay: 3s;
animation-fill-mode: both;
}
@keyframes typing {
from { 
width: 0 
}
to { 
width: 3em;
}
}
@keyframes typing2 {
from { 
width: 0 
}
to { 
width: 20em;
}
}
@keyframes blink-caret {
from, to {
border-color: transparent
}
50% {
border-color: white;
}
} 

Answer 1

我不知道为什么这样做，但它确实有效。让我知道它是否能达到预期效果。

.typewriter h2 {
color: #fff;
font-family: 'DM Mono', monospace;
font-size: 40px;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid orange;
//this is what i changed
width: 12ch;
animation: typing2 2s steps(12, end), blink-caret 1s step-end infinite;
////
animation-delay: 3s;
animation-fill-mode: both;
}
@keyframes typing2 {
from { 
width: 0 
}
to {
//this is what i changed
width: 12ch;
////
}
}