有趣的css -1

最近频繁的更博客和学习有点儿疲惫了，正在浏览到一个不错的css仓库。选了一个比较有趣的打字效果实现介绍一下。
css仓库：
https://lhammer.cn/You-need-to-know-css/
代码实现：
https://codepen.io/tcap99/pen/yQNqaJ

解析
HTML

<main class="main">
  <span>You-need-to-know-css!</span>
 </main>

CSS

main {
    width: 100%; height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  span {
    display: inline-block;
    width: 21ch;
    font: bold 200% Consolas, Monaco, monospace;   /*等宽字体*/
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
    border-right: 1px solid transparent;
    animation: typing 10s steps(21), caret .5s steps(1) infinite;
  }
  @keyframes typing{
    from {
        width: 0;
    }
  }
  @keyframes caret{
    50% { border-right-color: currentColor}
  }

逐步介绍css代码
flex居中布局

main {
    width: 100%; height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

 span {
    display: inline-block;
    width: 21ch;
    font: bold 200% Consolas, Monaco, monospace;   /*等宽字体*/
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
    border-right: 1px solid transparent;
    animation: typing 10s steps(21), caret .5s steps(1) infinite;
  }

https://www.zhangxinxu.com/wordpress/2016/07/monospaced-font-css3-ch-unit/
首先看到width: 21ch，ch是什么鬼？是不是打错了。详情请浏览张老师的文章。
ch和em,rem,ex一样，是CSS中为数不多和字符相关的相对单位。和ch相关的字符是0，没错，就是0123456的那个阿拉伯数字0. 1ch表示一个0字符的宽度，所以000000所占据的宽度就是6ch。
因为我们font都使用了等宽字体，刚好有21个字符，所以width设定为21ch。
这段代码作用是为了在宽度不为21ch，遮盖住没有显示的字符。

overflow: hidden;

border-right: 1px solid transparent;这就输入时闪烁的光标。这里有两个动画，typing在10秒中执行了21次，caret在不停的在0.5秒执行（闪烁的光标）。

border-right: 1px solid transparent;
animation: typing 10s steps(21), caret .5s steps(1) infinite;

通过改变21次宽度，达到逐渐输入文字的效果。

 @keyframes typing{
    from {
        width: 0;
    }
  }

通过设置颜色和不停执行动画达到光标效果。

@keyframes caret{
    50% { border-right-color: currentColor}
  }