时间戳

首页 > 解决方案 > HTML/CSS 延迟

css - HTML/CSS 延迟

问题描述

有人可以告诉我如何在文本写入后添加暂停几秒钟，然后让它循环并再次执行相同操作吗？

我添加了以下代码：

CSS：

body {
  background: #000;
}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  color: #fff;
  font-family: Bebas Neue;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end) infinite,
    blink-caret .5s step-end infinite;
}

/* 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 }
}

亲切的问候，

Ĵ

标签： css

解决方案

您只需要延长“@keyframes typing”结束时间。在您的捆绑结束之前，宽度达到 30%，它将立即重新开始，但结束时间会延长。动画将被“延迟”。

请参阅下面的片段

body {
  background: #000;
}


/* DEMO-SPECIFIC STYLES */

.typewriter h1 {
  color: #fff;
  font-family: Bebas Neue;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  /* Adjust as needed */
  animation: typing 3.5s steps(30, end) infinite, blink-caret .5s step-end infinite;
}


/* The typing effect */

@keyframes typing {
  0% {
    width: 0
  }
  50% {
    width: 100%
  }
  100% {
    width: 100%
  }
}


/* The typewriter cursor effect */

@keyframes blink-caret {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: orange
  }
}
<div class="typewriter">
  <h1>
    writing text
  </h1>
</div>

推荐阅读