效果如下:
// 结构
<div class="typing">css 实现打字效果!!! 作者--王新焱</div>
// 样式
.typing {
width: 18em; height: 1.25em;
border-right: 1px solid transparent;
animation: typing 5s steps(36, end), blink-caret .75s step-end infinite;
font-family: Consolas, Monaco;
word-break: break-all;
overflow: hidden;
}
/* 打印效果 */
@keyframes typing {
from { width: 0; }
to { width: 18em; }
}
/* 光标闪动 */
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: currentColor; }
}