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>

CSS内嵌样式实现打字效果

原文：https://www.cnblogs.com/cddaishi/p/9744703.html