@nicecode/funny/es/typing/index.less

funny,一些有趣的代码,funny code

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

@keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}

.cssPrint {
  width: 100%;
  height: 100%;
  background-color: black;

  &_h1 {
    display: inline-block;
    color: lime;
    font: bold 200% Consolas;
    /*font: bold 200% "Source Code Pro";*/
    /*必须使用等宽字体*/
    border-right: .1em solid currentColor;
    width: 28ch;
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3s steps(20, end),
      blink-caret .5s step-end infinite alternate;
    /*step-end每个关键帧在end处跳转，infinite无限循环播放，alternate来回播放，normal顺序播放*/
  }
}