简单的打字效果

const dom = document.querySelector('.content')
const data = '最简单的打字效果代码'.split('')
    let index = 0
    function writing(index) {
        if (index < data.length) {
            dom.innerHTML += data[index]
            setTimeout(writing.bind(this), 200, ++index)
        }
    }

 

在字的后面加上模拟的闪烁光标:

::after{
    content: '|';
    animation: blink 1s infinite
}
@keyframes blink{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

 

posted @ 2019-12-02 17:00  潇潇-lucky  阅读(85)  评论(0编辑  收藏  举报