html - 打字机效果，光标移至屏幕末尾然后自行修复

Question

我想在我的一个段落中添加打字机效果，当我添加它时，光标会输入所有内容，然后继续向左移动，然后自行修复。如何使其在文本处结束。

#p12 {
   overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 2px;
    animation: typing 1.3s steps(10, end), blink-caret .75s steps(50, end) infinite;
}
#p12 {
    display: inline-flex;
  }
  
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

<center>  
<p id="p12" style="color:red;font-size:20px">
<b>  Welcome to my website!  </b> </p> </center>

Answer 1

您可以在容器元素上使用 display:flex 来防止动画元素扩展到全屏宽度。 (我还用 <center> 等效项替换了您对过时 margin:auto 标签的使用:)

#container {
  display: flex;
}

#center {
  margin: auto;
}
/* Remaining CSS is identical to original */
#p12 {
  display: flex;
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 2px;
  animation: typing 1.3s steps(10, end), blink-caret .75s steps(50, end) infinite;
}

#p12 {
  display: inline-flex;
}


/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange;
  }
}

<div id="container">
  <div id="center">
    <p id="p12" style="color:red;font-size:20px">
      <b>Welcome to my website!</b> 
    </p>
  </div>
</div>