<script setup lang="ts"></script>
<template>
  <div class="content fit center">
    <p class="line">出来混，迟早是要胖的。</p>
  </div>
</template>

<style lang="scss" scoped>
@keyframes grow {
  from {
    width: 0;
  }
  to {
    width: 200px;
  }
}
@keyframes blink {
  from {
    border-right-color: #eee;
  }
  to {
    border-right-color: transparent;
  }
}
.content {
  font-family: '宋体', cursive;
  background-color: #222;
  color: #eee;

  &:hover {
    .line {
      animation: grow 1.5s steps(11) 1s normal both,
        blink 700ms steps(11) infinite normal;
    }
  }
}
.line {
  font-size: 18px;
  width: 200px;
  border-right: 2px solid #eee;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  animation: blink 700ms steps(11) infinite normal;
}
</style>
