<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>打字机效果！</title>
<link rel="stylesheet" href="">
<style>
#box{display: none;border:1px solid #ccc;margin: 20px 30em;padding: 20px;line-height: 1.8;font: 14px/1.8 "microsoft yahei";}
#box:after{content:"_";animation:flash .6s steps(2,start) infinite;-webkit-animation:flash .6s steps(2,start) infinite;}
#box.over:after{display:none;}
@keyframes flash{
0%{visibility:visible;}
100%{visibility:hidden;}
}
@-webkit-keyframes flash{
0%{visibility:visible;}
100%{visibility:hidden;}
}
</style>
</head>
<body>
<div id="box">
1. Whatever is worth doing is worth doing well.<br />
 任何值得做的，就把它做好。<br /><br />
2. Happiness is a way station between too much and too little.<br />
 幸福是太多和太少之间的一站。<br /><br />
3. In love folly is always sweet.<br />
 恋爱中，干傻事总是让人感到十分美妙。<br /><br />
4. The hard part isn’t making the decision. It’s living with it.<br />
 做出决定并不困难，困难的是接受决定。<br /><br />
5. Your happy passer-by all knows, my distressed there is no place hides.<br />
 你的幸福路人皆知，我的狼狈无处遁形。<br /><br />
6. You may be out of my sight, but never out of my mind.<br />
 你也许已走出我的视线，但从未走出我的思念。
</div>
<script>
(function(){
var con=document.getElementById('box');
var index=0;
var code=con.innerHTML;
con.innerHTML = "";
con.style.display = "block";
function start(){
index++
if(index<=code.length){
switch(code.charAt(index)) {
case "<":
index=code.indexOf(">",index)
break;
case "&":
index=code.indexOf(";",index)
break;
}
con.innerHTML=code.substring(0,index);
setTimeout(start,100)
}else{
con.setAttribute('class','over')
}
}
start();
})()
</script>
</body>
</html>
