css 打字机效应

toiithl6  于 2023-03-24  发布在  其他
关注(0)|答案(1)|浏览(95)

所以我得到了打字机效果的工作,但当我这样做,它只做了一次,我希望它是连续的,我想确保 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>
avkwfej4

avkwfej41#

interation-countinfinite添加到typingblink-caret动画中。如果要从后退方向重新启动动画,可以使用alternate

.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) infinite alternate, blink-caret 0.75s step-end infinite alternate;
  /* Sets the animation for the typing and blinking cursor */
}

@keyframes typing {
  from {
    width: 0;
  }
  /* Starts with no width */
  to {
    width: 100%;
    max-width: fit-content;
  }
  /* 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>
  <h1 style="font-size: 26px">Food Made With Love</h1>

  <p style="font-size: 18px" class="typewriter">
    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>

相关问题