umtheme 本文主要介绍了纯CSS实现打字动画效果，逐个显示一段文本中的字符，模拟出一种打字的效果，通过这种效果提升网页设计感，希望本文的介绍能够对大家的学习或工作有一定的参考学习价值...
本文主要介绍了纯css实现打字动画效果，逐个显示一段文本中的字符，模拟出一种打字的效果，通过这种效果提升网页设计感，希望本文的介绍能够对大家的学习或工作有一定的参考学习价值
效果如下：
创建HTML页面，在body中添加以下html代码：
<p class="load-text">loading...</p>
CSS代码：
/*光标动画*/
@keyframes caret {
50% {
border-color:transparent;
}
}/*文本动画：从宽度为0开始*/
@keyframes text {
from {
width:0;
}
}.load-text {
width:11ch;
margin:0 auto;
overflow:hidden;
word-break:keep-all;
color:#b1f1f3;
border-right:3px solid #000000;
font:bold 400% monospace;
animation:caret 0.5s step-end infinite,text 5s infinite steps(11);
}注：css代码中width:11ch和steps(11)中的11根据字符长度设定。
