效果展示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;height: 100vh;background: #ff9292;display: flex;justify-content: center;align-items: center;}.text {font-size: 20px;/* background: red; */border-right: 2px solid #fff;white-space: nowrap;overflow: hidden;width: 0;animation: grow 4s infinite steps(14) 2s,blink 500ms infinite steps(44);}@keyframes grow {40%,60% {width: 124px;}100% {width: 0;}}@keyframes blink {from {border-right-color: #fff;}to {border-right-color: transparent;}}</style>
</head><body><p class="text">Hello World!</p>
</body></html>
原理讲解
从宽度0到300px来显示标签内容，
宽度0时溢出的部分设置 overflow: hidden;
文本超出标签换行的属性设置为 white-space: nowrap;
设置边框作为光标，增加动画 有颜色到透明 持续时间500ms制造闪烁效果
出场grow关键帧中间顶峰时保持不变，40，60% 为300px最大值，
设置grow的delay属性为其增加停顿感
steps 为帧数， 越小越卡，越像光标闪烁
![[leetcode]beautiful-arrangement. 优美的排列](https://img-blog.csdnimg.cn/direct/deea55b88eab4af5909ef37672862aa8.png)
