实现思路控制文字宽度htmlloading文字外观效果首先，第一步我们制作一个动画。.loading-text{宽度：100px；动画：loading-text-typing3s;}@keyframesloading-text-typing{from{width:0;}}经过上面的样式，就没有效果了。由于文本尚未处理，您至少可以通过禁用换行空白和隐藏溢出来获得流畅的文本显示动画。.loading-text{...空白：nowrap;overflow:hidden;}流畅的打字效果动画无法显示打字效果，也没有出现每个单词的效果。这时候可以考虑一个宽度单位ch。ch是数字“0”的宽度。只要我们保持所有字母宽度相等，我们就可以使用ch来表示所有文本宽度。字母通常是不等宽的。如下iiiiiimmmmmmmm对于等宽，我们可以通过设置font-family属性来寻找等宽文本。以下三个可以是Consolas、Monaco和monospace。这时候可以使用steps功能，具体可以自行查看。一个一个实现文字的外观。loading-text{...font-family:Consolas,Monaco,monospace;宽度：10ch；animation:loading-text-typing3ssteps(10),}光标效果光标相当于另一个动画，闪烁，是颜色切换animation.loading-text{animation:loading-text-caret1ssteps(1)infinite,}@keyframesloading-text-caret{50%{边框颜色：透明；}}最终代码css.loading-text{font-family:Consolas,Monaco,monospace;显示：内联块；颜色：#ED6A5A；字体粗细：粗体；宽度：11ch；动画：loading-text-typing3ssteps(11)infinite,loading-text-caret1ssteps(1)infinite;空白：nowrap；溢出：隐藏；border-right:1pxsolid;}@keyframesloading-text-typing{from{width:0;}}@keyframesloading-text-caret{50%{边框颜色：透明；}}注意width:11ch;ch是等宽间距，有多少字符就定义多少。我多定义了一个width，因为我是连续动画，所以如果不是连续动画就不用加1了。
