趣玩分享——css打字机效果PK传统js打印

嗨，我是竹风，今天为大家带来一波打字机效果，首先上效果图：

上面两种效果，不知道你更喜欢哪一种呢？下面分别向大家介绍实现方法。

一、JS打印

先介绍一下js实现打字机效果的原理，其实主要是substring函数，它有两个参数，开始位置和结束位置，用于提取字符串中介于两个指定下标之间的字符。实现代码如下：

将文本通过substring函数分离开，然后不断向后提取输出。这也是比较传统的方式。现在介绍另一种使用新兴css3来实现这个效果。

二、CSS打印

实现打印效果我们第一想到的就是把文字一个个提取出来，但是css不能拆分文本，所以想到另一种方式，通过控制显示隐藏来实现分离。好，顺着这个思路写出代码：

代码也很简单，通过css分步动画，多少个文字就分成多少步，实现一个一个出现的效果。

三、比较总结

纵观两种语言实现方式，我还是更喜欢js，简单粗暴。css方法中如果字体不同，中英文不同，单个长度都会发生变化，不太适宜开发维护。但如果文字较少，用css效果还是不错的。

今天的分享到此结束，关注我，每天都要更新哦。玩转前端，带你领略不一样的前端世界！