打字动画是对逐帧动画和闪烁动画的一种应用，核心思路是使用动画改变容器的宽度，容器自身带有不换行和超出隐藏效果。
实现打字动画，需要用到ch单位，这个单位表示0字符的宽度，所以需要使用等宽字体
<h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
<h1>abcdefghijklmnopqrstuvwxyz</h1>
h1{
font-family: Consolas; // 设置等宽字体
width:26ch; // 以内容字符数量来设置元素宽度
border-right: 1px solid currentColor; // 又边框模拟闪烁光标
white-space: nowrap;
overflow: hidden;
animation: typing 4s steps(26),
border 1s 4s steps(1) infinite;
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes border {
50% {
border-color:transparent;
}
}
网友评论