直接上代码 这个程序贼有趣 像打字机把一个字一个字打出来 不通过js也能完成动态效果，这也是css的好处哈
代码语言：javascript复制 <style>
@keyframes w {
0% {
width: 0;
}
100% {
width: 900px;
}
}
div {
margin: 0 auto;
overflow: hidden;
font-size: 100px;
width: 0;
height: 120px;
white-space: nowrap;
background-color: purple;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: w 2s steps(9) forwards;
}
</style><body>
<div>程序猿是一个大帅比</div>
</body>其中我们运用到了steps()属性 程序设计思路： 我们发现"程序猿是一个大帅比"是九个字，我们想一次出现一个，所以填9。 我们想让所有汉字在一行上显示所以要用 white-space: nowrap; 多余部分要省略overflow: hidden; 然后找一个好看的布局，本人是把它放在正中间 如果在网页设计中可以根据网页进行定位 我们为了美观，就要设置汉字大小，汉字个数乘以大小就等于宽度，盒子高度要大于汉字高度，这是我们设计中必须要调试和计算的内容。 这个小窍门学废了么= = 宁外，博主也是个大帅币。
