看起来像自动打字的一个效果

首先，我们先在一个div里面放入一段文字，什么都可以，再设置它的字体大小为20px,边距也稍微设置一些，不要贴着浏览器，影响美观，再把字体的颜色变得好看一点，比如设个蓝色，紫色什么的，我这里设为蓝色，再根据文字占得宽高进行宽高的设置，因为太宽了或者太窄了就会影响后面的一个显示效果
文字样式截图：

设置完文字以后，为了使效果更逼真，我们做出一个鼠标光标的闪烁效果，就像我们打字时光标闪烁的那样；先弄出一条竖线来，设置这个div的右边框为2px，实线，蓝色，然后一条蓝色的竖线就出来了，再让其闪烁，这里就需要我们的动画了，先@keyframes后面跟动画名称再花括号里面50%的时候让它的边框颜色变为transparent 然后再到动画里面去调用动画名称，让它间隔一秒闪烁一次，无限循环，这样就能达到一个类似鼠标闪烁的效果了

鼠标闪烁代码截图：

当光标可以闪烁后，我们需要做到让文字一个一个的显示出来，就像打字时那样，于是我们先把文字给隐藏起来，再用@keyframes 写出一个从宽度为0%时，再去动画里面调用，
文字一个一个出现的代码截图：

敲出代码以后再去看看它的效果如何

自动打字效果截图：

然后我们的一个自动打字就完成了，当然，这里需要注意一下的是，我们不可能一出来就能刚好完美的让它一个一个显示，所以要合理的计算出它的每次移动的距离，这样才能达到每闪烁一次只显示出一个字的效果，比如一共有39个字的时候给它设置39秒，跳动39次（个人方法）：