打印机效果--光标闪烁效果

<h2 class="c-Cover-title">编程更轻松，创意更自由</h2>

.c-Cover-title {

  letter-spacing: 2px;

  font-size: 22px;

  font-family: PingFang SC, PingFang SC-Regular;

  font-weight: 500;

  color: #2a2b36;

  line-height: 1;

  margin-top: 20px;

  white-space: nowrap;

  border-right: 2px solid transparent;

  width: 12em;

  animation: typing 1.5s steps(12, end), blink-caret 0.75s step-end infinite;

  overflow: hidden;

  margin-left: auto;

  margin-right: auto;

  padding-right: 2px;

  box-sizing: content-box;

  margin-bottom: 50px;

}

/* 打印效果 */

@keyframes typing {

  from {

    width: 0;

  }

  to {

    width: 12em;

  }

}

/* 光标闪啊闪 */

@keyframes blink-caret {

  from,

  to {

    box-shadow: 2px 0 0 0 transparent;

  }

  50% {

    box-shadow: 2px 0 0 0;

  }

}