auto printer 自动打字机效果
前段时间在知乎上看到了一个打字机的效果,所以,心血来潮,自己也来写了一个打字机的效果。
比较简单,但还有待优化的地方,因为自己感觉这个效果不够炫,等哪天想出好的点子了。再来更新……
代码效果预览地址:http://code.w3ctech.com/detail/2525
html:
1 <div class="container">
2 <div id="title"><h3>我喜欢出发--汪国真</h3></div>
3 <span id="content">
4 </span>
5 <span class="line">_</span>
6 </div>
css:
*{
padding:0;
margin:0;
}
body{
}
.container{
width:80%;
margin:0 auto;
height:auto;
padding-top:80px;
color:#2d6b28;
line-height:24px;
font-size:20px;
transition:all 100ms ease 100ms;
}
.line{
animation:myfirst 0.5s infinite;
}
@keyframes myfirst
{
from{opacity:0}
to{opacity:1}
}
js:
window.onload = function () {
var content = document.getElementById("content");
var index = 0;
var timer;
var str = "我喜欢出发。n凡是到达了的地方,都属于昨天。哪怕那山再青,那水再秀,那风再温柔。太深的流连便成了一种羁绊,绊住的不仅有双脚,还有未来。n怎么能不喜欢出发呢?没见过大山的巍峨,真是遗憾;见了大山的巍峨没见过大海的浩瀚仍然遗憾;见了大海的浩瀚没见过大漠的广袤,依旧遗憾;见了大漠的广袤没见过森林的神秘,还是遗憾。世界上有不绝的风景,我有不老的心情。n我自然知道,大山有坎坷,大海有浪涛,大漠有风沙,森林有猛兽。即便这样,我依然喜欢。n打破生活的平静便是另一番景致,一种属于年轻的景致。真庆幸,我还没有老。即便真老了又怎么样,不是有句话叫老当益壮吗?n于是,我还想从大山那里学习深刻,我还想从大海那里学习勇敢,我还想从大漠那里学习沉着,我还想从森林那里学习机敏。我想学着品味一种缤纷的人生。n人能走多远?这话不是要问两脚而是要问志向;人能攀多高?这事不是要问双手而是要问意志。于是,我想用青春的热血给自己树起一个高远的目标。不仅是为了争取一种光荣,更是为了追求一种境界。目标实现了,便是光荣;目标实现不了,人生也会因这一路风雨跋涉变得丰富而充实;在我看来,这就是不虚此生。n是的,我喜欢出发,愿你也喜欢。";
function print() {
if (index == 0) {
content.innerHTML += "</br></br>";
content.innerHTML += "      ";
}
if (str[index]=="n") {
content.innerHTML += "</br></br>";
content.innerHTML += "      ";
}
else if (index==str.length) {
clearInterval(timer);
}
else
content.innerHTML += str[index];
index++;
}
timer=setInterval(print,100);
}