CSS内嵌样式实现打字效果

<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>