vue实现自动打字效果

pGy。

已于 2024-04-08 15:45:31 修改

阅读量947

点赞数 1

文章标签：前端

于 2022-04-24 20:10:56 首次发布

本文链接：https://blog.csdn.net/weixin_44952328/article/details/124390425

版权

dom结构：

	<div class="text">
        <p class="line animation">Welcome to GitHub!</p>
      </div>
      <div class="text margin">
        <p class="line animation it">Let’s begin the adventure</p>
      </div>

style:

.text {
  position: absolute;
  top: 10%;
  left: 10%;
  font-weight: bold;
  font-size: 1.2rem;
}
.text.margin {
  top: 15%;
}
.line {
  width: 100%;
  border-right: 2px solid #000;
  white-space: nowrap;
  overflow: hidden;
}
.animation {
  animation: grow 2s steps(70) 1s normal both, blink 200ms infinite normal;
} /*对动画设置时间和分段，对右边框设置动画样式*/
.it {
  animation-delay: 3.5s;
} /*下一段延时执行动画*/
@keyframes grow {
  from {
    width: 0;
  }
  to {
    width: 100%; /*段落长度 */
    border-right-color: transparent;
  }
  0% {
    border-right: 0;
  } /*光标起始位置不显示*/
  1% {
    border-right: 2px solid #000;
  } /*光标显示*/
  99% {
    border-right: 2px solid #000;
  }
  100% {
    border-right: 0;
  } /*结束位置光标不显示*/
}
@keyframes blink {
  from {
    border-right-color: #000;
  }
  to {
    border-right-color: transparent; /*文字透明化*/
  }
}

实现效果：

自动打字效果