所以我得到了打字机效果的工作,但当我这样做,它只做了一次,我希望它是连续的,我想确保 Flink 的光标是不可见的。我希望相同的文本,只是我希望它是在一个循环来回。这是代码
.typewriter {
overflow: hidden;
/* Ensures the text is not visible until animation starts */
border-right: 0.15em solid orange;
/* Creates the blinking cursor */
white-space: nowrap;
/* Keeps the text on a single line */
margin: 0 auto;
/* Centers the element */
letter-spacing: 0.15em;
/* Adds a slight space between characters */
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
/* Sets the animation for the typing and blinking cursor */
}
@keyframes typing {
from {
width: 0;
}
/* Starts with no width */
to {
width: 100%;
}
/* Increases width to 100% */
}
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
/* Starts and ends with transparent border */
50% {
border-color: orange;
}
/* Changes border color to orange at 50% */
}
<div class="typewriter">
<h1 style="font-size: 26px">Food Made With Love</h1>
<p style="font-size: 18px">
Goo's Delights is a modern Boulder hotspot. Originally opened in 2015, Goo's Delights has been given numerous awards displaying their outstanding service and commitment to quality food. Goo's Delights is commited to bringing the community together, all
while providing the best food possible. Contact us for more info.
</p>
</div>
1条答案
按热度按时间avkwfej41#
将
interation-count
infinite
添加到typing
和blink-caret
动画中。如果要从后退方向重新启动动画,可以使用alternate
。