css打字机特效效果代码如下：
<style>
.container{display:inline-block;}
.typed-out{
overflow:hidden;
border-right:1px solid #000000;//这是光标
white-space:nowrap;
animation:typing 5s steps(21) forwards,blink 0.2s linear infinite;//step让隐藏的div一块一块显示，而不是润滑的显示，这样看起来就是一个字一个字显示。把forwards改成infinite就可以循环打字。
width:0;
height:20px;
line-height:20px;}
@keyframes typing {from { width: 0; } to {width:100%;}}//div从隐藏到全部显示
@keyframes blink {50% { border-color: transparent; }}//使光标闪烁
</style>
<div class="container"><div class="typed-out" align="center">文字一定要等宽，时间和步数需要和字数匹配。</div>
.container{display:inline-block;}
.typed-out{
overflow:hidden;
border-right:1px solid #000000;//这是光标
white-space:nowrap;
animation:typing 5s steps(21) forwards,blink 0.2s linear infinite;//step让隐藏的div一块一块显示，而不是润滑的显示，这样看起来就是一个字一个字显示。把forwards改成infinite就可以循环打字。
width:0;
height:20px;
line-height:20px;}
@keyframes typing {from { width: 0; } to {width:100%;}}//div从隐藏到全部显示
@keyframes blink {50% { border-color: transparent; }}//使光标闪烁
</style>
<div class="container"><div class="typed-out" align="center">文字一定要等宽，时间和步数需要和字数匹配。</div>
因为本质是div渐显，要注意文字一定要等宽，时间和步数需要和字数匹配，不然会出现半个字。光标闪烁的时间最好也调成和文字显示同步。