简单的打字效果

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

猜你喜欢

转载自www.cnblogs.com/xiaolucky/p/11971798.html