不使用 JavaScript 的打字效果

CSS 功能强大，无需 JS 即可完成很多工作。它的重要性还在于它掌控着网站所有与设计相关的方面。排版、颜色、页面布局以及网站的所有其他视觉元素都由强大的 CSS 掌控。

我依赖 CSS，这意味着我尽可能少使用 JavaScript。今天我将向你展示不使用任何 JavaScript 的打字效果！

让我们跳到代码！



<div class="container">
    <div class="type">
      This is one cool effect
    </div>
</div>

以及一些 CSS



.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.type {
  width: 35%;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}
@keyframes typing {
  from {
    width: 0
  }
}    
@keyframes blink {
  50% {
    border-color: transparent
  }
}

这是我们的结果：

谢谢大家！

文章来源：https://dev.to/stokry/typing-effect-without-javascript-54ol