不使用 JavaScript 的打字效果

2025-05-27

不使用 JavaScript 的打字效果

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

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

让我们跳到代码!



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


Enter fullscreen mode Exit fullscreen mode

以及一些 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
  }
}


Enter fullscreen mode Exit fullscreen mode

这是我们的结果:

在此处输入图片描述

谢谢大家!

文章来源:https://dev.to/stokry/typing-effect-without-javascript-54ol
PREV
为人类设计 API:对象 ID 条纹
NEXT
使用 Tauri 和 Yew 在 Rust 中创建桌面应用程序