首页 > 其他分享> > 前端纯CSS实现动画打字效果，中英文都支持

前端纯CSS实现动画打字效果，中英文都支持

2021-01-10 18:29:15 作者：互联网

效果如图：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .typing {
    width: 18.5em;
    height: 1.25em;
    border-right: 1px solid transparent;
    animation: typing 3.5s steps(37, end), blink-caret .75s step-end infinite;
    font-family: Consolas, Monaco;
    word-break: break-all;
    overflow: hidden;
  }

  /* 打印效果 */
  @keyframes typing {
    from {
      width: 0;
    }

    to {
      width: 18.5em;
    }
  }

  /* 光标闪啊闪 */
  @keyframes blink-caret {

    from,
    to {
      border-color: transparent;
    }

    50% {
      border-color: currentColor;
    }
  }
</style>

<body>
  <p class="typing">中英文mixed打字效率，测试啊  test</p>
</body>

</html>

标签：em,中英文,color,打字,keyframes,width,typing,border,CSS
来源： https://blog.csdn.net/weixin_42321819/article/details/112436634