多行文本 CSS 的打字效果

Question

我正在尝试使用CSS获得打字动画效果。

(参考资料：https://css-tricks.com/snippets/css/typewriter-effect/(

我正在尝试计算多行文本的效果，并想知道如何在键入第二行之前从第一行中删除光标？

下面提到了代码。

*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#hero {
background-image: url(bg.png);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
.typewriter h1 {
color: #fff;
font-family: monospace;
overflow: hidden;
font-size: 80px;
border-right: .15em solid orange;
white-space: nowrap;
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
/* keeps content in one line */
letter-spacing: .15em;
animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter h2 {
color: #fff;
font-family: monospace;
font-size: 40px;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid orange;
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
-webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end;
-webkit-animation-delay: 3s;
-webkit-animation-fill-mode: both;
-moz-animation: typing 2s steps(26, end), blink-caret 1s step-end;
-moz-animation-delay: 3s;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to {
border-color: transparent
}
50% {
border-color: orange;
}
}

<section id="hero">
<div class="hero container">
<div class="typewriter">
<h1>Hello, <span></span></h1>
<h2>This is XYZ<span></span></h2>
</div>
</div>
</section>

Answer 1

在 h2 上添加动画延迟：3 秒，并使 h1 中的闪烁插入符号动画重复 4 次而不是无限，它将起作用;

Answer 2

下面是一个使用 Javascript 的示例，我从 https://codepen.io/stevn 中分叉和调整

所有内容都位于pre标记内，因此它适用于换行符和缩进。放置多个<span></span>标签被视为暂停 - 这可以在第tempTypeSpeed = (Math.random() * typeSpeed) + 50;<行(最后一个整数(上进行调整。>

function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 100, // higher number = slower
tempTypeSpeed = 0;
var type = function() {

if (writingTag === true) {
tag += HTML[cursorPosition];
}
if (HTML[cursorPosition] === "<") {
tempTypeSpeed = 0;
if (tagOpen) {
tagOpen = false;
writingTag = true;
} else {
tag = "";
tagOpen = true;
writingTag = true;
tag += HTML[cursorPosition];
}
}
if (!writingTag && tagOpen) {
tag.innerHTML += HTML[cursorPosition];
}
if (!writingTag && !tagOpen) {
if (HTML[cursorPosition] === " ") {
tempTypeSpeed = 0;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
writingTag = false;
if (tagOpen) {
var newSpan = document.createElement("span");
t.appendChild(newSpan);
newSpan.innerHTML = tag;
tag = newSpan.firstChild;
}
}
cursorPosition += 1;
if (cursorPosition < HTML.length - 1) {
setTimeout(type, tempTypeSpeed);
}
};
return {
type: type
};
}
var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typewriter);
typewriter.type();

h1, h2 {
margin: 0;
display: inline-block;
padding-left: 20px;
}
#typewriter {
font-size: 2em;
margin: 0;
font-family: "Courier New";
}
#typewriter:after {
content: "|";
font-size: 2em;
font-family: "Courier New";
color: black;
-webkit-animation: blink 500ms linear infinite alternate;
animation: blink 500ms linear infinite alternate;
}
@-webkit-keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes blink {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

<pre id="typewriter">
<h1>Hello,</h1>
<span></span>
<span></span>
<h2>This is XYZ</h2></pre>