CSS打字效果

打字效果 demo

<style>
    *{margin: 0;}
    main{width:760px;height: 60px;margin: 30px auto;}
    .typing {
        width: 45em; height: 1.25em;
        border-right: 1px solid transparent;
        animation: typing 4.5s steps(79, end), blink-caret .75s step-end infinite;
        font-family: Consolas, Monaco;
        word-break: break-all;
        overflow: hidden;
    }
    /* 打印效果 */
    @keyframes typing {
        from { width: 0; }
        to { width: 45em; } /*45em 根据字数调整*/
    }
    /* 光标闪啊闪 */
    @keyframes blink-caret {
        from, to { border-color: transparent; }
        50% { border-color: currentColor; }
    }
    </style>
    
    <main>
       <p class="typing">一个在室内建筑装饰工程行业摸爬滚打5年的农民工，在这里记录一些日常生活中的琐事。-XL.RUN</p>
    </main>