css 实现打字特效（仅支持单行文本）

1. 闪烁光标通过右边框无限重复的颜色变透明动画实现
2. 打字特效的原理是宽度从0变为100%
3. 文本区的宽度用em为单位，数值需为当前文本内容的总数。
4. animation中的steps的参数值需为当前文本内容的总数。
5. 用css实现打字特效，仅支持单行文本，且无法改变速度

<p class="typingText">多想你知道，爱就在我心底流淌。</p>      

.typingText{
        width: 15em;
        /*帧动画 */
        animation: widthChange steps(15) 8s, blinkCursor steps(1) 1s infinite;
        overflow: hidden;
        /* 文本不换行： */
        white-space: nowrap;
        border-right: 0.1em solid;
    }

    @keyframes {
        0% {
            width: 0;
        }
    }

    @keyframes {
        50% {
            /* 颜色透明 */
            border-color: transparent;
        }
    }