我的打字机动画有问题。当文本到达宽度末尾时,溢出继续向右,我希望它继续在下面。
这是该段落的CSS:
.aboutMeText{
font-size: .9rem;
margin-bottom: 30px;
border-right: 0.15em solid #18bdec;
animation: typing 15s steps(395) 1s 1 normal both, blink 1s steps(1) infinite;
white-space: nowrap;
overflow-y: hidden;
overflow-wrap: break-word;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
我尝试更改和删除一些溢出属性,但没有任何改变。
我认为你指的是
multiline
打字动画:
看这个例子:
body {
background: #1a1b1e;
color: white;
font-weight: 900;
font-family: monospace;
font-size: 2rem;
}
#typing-container {
display: flex;
flex-direction: column;
}
.typing-text {
overflow: hidden;
white-space: nowrap;
width: 0;
animation: typing 2s steps(28, end) forwards;
}
.typing-text:nth-child(1) {
animation-delay: 0s;
}
.typing-text:nth-child(2) {
animation-delay: 0.8s;
}
.typing-text:nth-child(3) {
animation-delay: 1.2s;
}
.typing-text:nth-child(4) {
animation-delay: 2s;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
<div id="typing-container">
<span class="typing-text">Hello</span>
<span class="typing-text">World!</span>
<span class="typing-text">I am a </span>
<span class="typing-text">Programmer.</span>
</div>