逐个字符自动打印出来的文字

效果图：

 

代码： 

<template>
  <div>
    <div class="bruce flex-ct-x">
      <div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {},

  created() {}
};
</script>
<style lang="scss" scoped>
@mixin typing($count: 0, $duration: 0, $delay: 0) {
  overflow: hidden;
  border-right: 1px solid transparent;
  width: #{$count + 1}ch;
  font-family: Consolas, Monaco, Monospace;
  white-space: nowrap;
  animation: typing #{$duration}s steps($count + 1) #{$delay}s backwards,
    caret 500ms steps(1) #{$delay}s $duration * 2 forwards;
}
.auto-typing {
  font-weight: bold;
  font-size: 30px;
  color: blue;
  //调用上面定义的方法，并传入参数 第一个为显示的字数，第二个为执行动画的总时间,第三个为延迟的时间
  @include typing(52, 5, 0);
}
@keyframes typing {
  // 动画执行的起始位置，从最左边开始
  from {
    width: 0;
  }
}
@keyframes caret {
  50% {
    border-right-color: currentColor;
  }
}
</style>