逼真打字机效果； 

<!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 />
            &emsp;任何值得做的，就把它做好。<br /><br />
            2. Happiness is a way station between too much and too little.<br />
            &emsp;幸福是太多和太少之间的一站。<br /><br />
            3. In love folly is always sweet.<br />
            &emsp;恋爱中，干傻事总是让人感到十分美妙。<br /><br />
            4. The hard part isn’t making the decision. It’s living with it.<br />
            &emsp;做出决定并不困难，困难的是接受决定。<br /><br />
            5. Your happy passer-by all knows, my distressed there is no place hides.<br />
            &emsp;你的幸福路人皆知，我的狼狈无处遁形。<br /><br />
            6. You may be out of my sight, but never out of my mind.<br />
            &emsp;你也许已走出我的视线，但从未走出我的思念。
        </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>

 

posted @ 2016-03-24 18:10  Jone_chen  阅读(611)  评论(0)    收藏  举报