css打字机效果PK传统js打印

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

print

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

一、JS打印

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

1
2
3
4
5
6
var index=0;
var text="今天是个好日子,幸福像花儿一样。";
function type(){
document.getElementById("txt").innerText = text.substring(0,index++)+'_';
}
setInterval(type, 350);

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

二、CSS打印

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

h1 {
font: bold 200% Consolas, Monaco, monospace;
border-right: .1em solid;
width: 16.5em; /* fallback */
/* width: 30ch; # of chars */
margin: 2em 1em;
white-space: nowrap;
overflow: hidden;
animation: typing 10s steps(16, end), /* # of steps = # of chars */
blink-caret .5s step-end infinite alternate;
}

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

三、比较总结

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

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

最后更新:

原始链接: http://wangzc.cc/blog/demos-prints/