js+jQuery实现网页打字机效果（带光标）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_33312523/article/details/72628958

在写网站的时候，有时候可能需要打字机动画去实现一些页面效果的显示，我在网上找了很久也没有很完整的，符合我要求的代码，索性就结合网上的大神们的代码段自己写了一个

HTML

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

CSS

        .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;
        }

JS

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写出来的又对容器的宽要求很高，光标一直悬于最后方不利于实战开发，我认为这种方法相对较好