需求:实现打字机动态打字效果
知识点:CSS动画属性,steps()
<p>你好世界你好世界你好世界你好世界你好世界你好世界</p>
@keyframes pMove{
from{width: 0;}
to{width: 100%;}
}
p{
/* steps(参数) 参数可以填数字,表示当前这段动画分了多少帧 */
animation: pMove 3s steps(20) infinite;
white-space: nowrap;
overflow: hidden;
}