文字逐字出现，末尾光标持续闪烁
← 返回 文字 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .type{display:flex;justify-content:center;margin:44px 0;font-size:24px;font-family:Consolas,monospace}
.fx .type .t{overflow:hidden;white-space:nowrap;border-right:2px solid #f778ba;width:0;animation:kfx-type 4s steps(13,end) forwards,kfx-caret .8s step-end infinite}
@keyframes kfx-type{to{width:15em}}
@keyframes kfx-caret{50%{border-color:transparent}}<div class="fx">
<div class="type"><span class="t">Hello, 纯 CSS 打字机！</span></div>
</div>