<style>
*{margin:0;padding:0;}
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h1 {
font: bold 200% Consolas, Monaco, monospace;
border-right: .1em solid;
width: 16.5em; /* fallback */
width: 30ch; /* # of chars */
margin: 2em 1em;
white-space: nowrap;
overflow: hidden;
animation: typing 10s steps(20, end), /* # of steps = # of chars */
blink-caret .4s step-end infinite alternate;
}
</style>
<h1>百花居，专注鲜花网络预定9年！！</h1>
CSS内嵌样式实现打字效果
原文地址：https://www.cnblogs.com/cddaishi/p/9744703.html