纯 CSS 实现打字效果,效果如下:
HTML 代码:
<div > <div > 关注于前端开发的技术博客 </div> </div>
CSS 代码:
.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center; } .typing-demo { width: 22ch; 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 } }