自己做的一个css文字逐字显示效果

原理很简单，就是通过opacity+animation控制显示，每个文字通过animation-delay延迟显示达到逐字显示的效果

两个函数，一个拆分字符串，一个初始化动画

function sliceStrWithSpan(str) {
    var strArr = str.slice('');
    var strReturn = '';
    for (var i = 0; i < strArr.length; i++) {
        strReturn = strReturn + "<span class='str_animate'>" + strArr[i] + "</span>"
    }
    return strReturn;
}

function initStrAnimate(ln, delayTime) {
    // ln:需要展示动画的字符串长度
    // delayTime:延迟时间
    var styleSheets = document.styleSheets;
    var currentStyleSheet = null;
    for (var i = 0; i < styleSheets.length; i++) {
        if (styleSheets[i].ownerNode && styleSheets[i].ownerNode.id === 'emptyRules') {
            currentStyleSheet = styleSheets[i];
            // 丝滑
            currentStyleSheet.insertRule('@-webkit-keyframes textReveal{0% {opacity: 0;}100% {opacity: 1;}}', currentStyleSheet.cssRules.length);
            // 顿挫
            // currentStyleSheet.insertRule('@-webkit-keyframes textReveal{0% {opacity: 0;}80% {opacity: 0;}81% {opacity: 1;}100% {opacity: 1;}}', currentStyleSheet.cssRules.length);
            currentStyleSheet.insertRule('.str_animate {opacity: 0;-webkit-animation: textReveal 1s linear forwards;}', currentStyleSheet.cssRules.length);
            for (var j = 1; j <= ln; j++) {
                currentStyleSheet.insertRule('.str_animate:nth-child(' + j + '){-webkit-animation-delay: ' + (j * delayTime) + 'ms;}', currentStyleSheet.cssRules.length);
            }
            break;
        }
    }
}

注意需要在index.html加一个空style标签

<style id="emptyRules"></style>

调用的时候，先初始化动画，再拆分字符串写到dom里就行了

initStrAnimate(navigator.appVersion.length, 20);
document.getElementById("browser_info").innerHTML = sliceStrWithSpan(navigator.appVersion)

具体的展示效果可以通过修改keyframes达到，代码注释有提到顿挫和丝滑两个效果