1. <style>
    2. .typing {
    3. width: 18.5em; height: 1.25em;
    4. border-right: 1px solid transparent;
    5. animation: typing 3.5s steps(37, end), blink-caret .75s step-end infinite;
    6. font-family: Consolas, Monaco;
    7. word-break: break-all;
    8. overflow: hidden;
    9. }
    10. /* 打印效果 */
    11. @keyframes typing {
    12. from { width: 0; }
    13. to { width: 18.5em; }
    14. }
    15. /* 光标闪啊闪 */
    16. @keyframes blink-caret {
    17. from, to { border-color: transparent; }
    18. 50% { border-color: currentColor; }
    19. }
    20. </style>
    21. <p class="typing">中英文mixed打字effect,作者:张鑫旭</p>

    css实现网页打字效果 - 图1