效果展示
<!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 为帧数， 越小越卡，越像光标闪烁
