如何让光标在完成第二行时闪烁 - 使用 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;
            ////
        }
    }

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

How to get the cursor to blink upon the completion the second line - Typewriting effect using CSS

html

css

effect