不使用 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