css实现打字效果

css实现打字效果

<!-- 中文 -->
<style type="text/css">
  .typing-cn {
    width: 15.1em;
    white-space: nowrap;
    border-right: 2px solid transparent;
    animation: typing 3.0s steps(15, end), blink-caret .75s step-end infinite;
    overflow: hidden;
  }
  /* 打印效果 */
  @keyframes typing {
    from { width: 0; }
    to { width: 15.1em; }
  }
  /* 光标 */
  @keyframes blink-caret {
    from, to { box-shadow: 1px 0 0 0 transparent; }
    50% { box-shadow: 1px 0 0 0; }
  }
</style>

<div class="typing-cn">简易中文打字效果，简易打字效果</div>


<!-- 英文 -->
<style type="text/css">
  .typing-en {
    width: 22ch;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2em;
    animation: typing 2s steps(22) infinite, effect .5s step-end infinite alternate;
  }
  @keyframes typing {
    from { width: 0; }
  }
  @keyframes effect {
    50% { border-color: transparent; }
  }
</style>

<div class="typing-en">Typing effect for text</div>

效果如下

简易中文打字效果，简易打字效果

Typing effect for text