在寫網站的時候，有時候可能需要打字機動畫去實現一些頁面效果的顯示，我在網上找了很久也沒有很完整的，符合我要求的程式碼，索性就結合網上的大神們的程式碼段自己寫了一個

HTML

<div class="container"></div>

        .container{
            float: left;
            display: inline-block;
            position: relative;
        }
        @keyframes blink-caret { 50% { background-color: transparent; } }
        span{
            animation:blink-caret 1s step-end infinite;
            width: 3px;
            height: 20px;
            background-color: #000;
            float: left;
            position: absolute;
            right: -10px;
        }
 

var s = 'Welcome to LoVueAn';
    var con = $('.container');
    var index = 0;
    var length = s.length;
    var tId = null;

    function start(){
        con.text('');
        con.append('<span></span>');
        tId=setInterval(function(){
            con.append(s.charAt(index));
            if(index++ === length){
                clearInterval(tId);
                index = 0;
                start()
            }
        },400);
    }

    start();
 

這段程式碼採用了JS中的定時器，支援輸入完之後歸零再次動畫，通過append添加了一個span標籤模擬游標，css動畫渲染閃爍效果，再通過絕對定位始終依附在父容器的右方以達到模擬輸入效果的目的。注意在表頭引入jquery！

網上搜索到的一般都是通過原生JS寫出，但沒有游標效果，純CSS寫出來的又對容器的寬要求很高，游標一直懸於最後方不利於實戰開發，我認為這種方法相對較好