纯CSS代码实现打字机效果显示文字

上网找了很多资料，后面找同窗查看自己代码的时候发现其实设置起来很简单，主要用到这三个属性

1. step(number,start/end);
   number是将动画分段，如图所示：
   
   start/end则表示从哪里开始打印，这个地方很不好理解，我把链接里面讲的比较重要的地方截个图出来：

点击查看step属性具体讲解

2. display: flex;
   display: flex弹性将div盒子设置成弹性盒子，子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行；
3. justify-content: center;
   justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，有三个比较容易理解的属性：fix-start|fix-end|center 可以各自试一下，分别代表
   • 项目位于容器开头（默认值）；
   • 项目位于容器结尾；
   • 项目位于容器中心；

完整代码如下所示：
html代码：

<div class="state">
	<p class="type">Create&nbsp;&nbsp;Meatverse&nbsp;&nbsp;With&nbsp;&nbsp;Computing&nbsp;&nbsp;Power</p>
</div>

css代码

.state {
    /* 将div盒子设置成弹性盒子 */
    display: flex;
    /* 令文字位于容器中间开始显示 */
    justify-content: center;
    width: 100%;
}
.state p{
    font-size: 50px;
    color: #fff;
}
.type {
    font-family: "Pixeboy";
    white-space: nowrap;
    animation: type 4.5s steps(35,end);
    /* 
    1.利用step(number,end/start)将文字分为35段显示,
    2.持续时间为4.5s,
    3.动画效果是自定义效果type*/
    overflow: hidden;
}
@keyframes type {
    from{
        width:0;
    }
    to{
        width: 35ch;
    }
}