代码如下：
纯中文版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.typing {
width: 15em;
white-space: nowrap;
border-right: 2px solid transparent;
animation: typing 3.5s steps(15, end), blink-caret .75s step-end infinite;
overflow: hidden;
}
/* 打印效果 */
@keyframes typing {
from { width: 0; }
to { width: 15em; }
}
/* 光标闪啊闪 */
@keyframes blink-caret {
from, to { box-shadow: 1px 0 0 0 transparent; }
50% { box-shadow: 1px 0 0 0; }
}
</style>
</head>
<body>
<p class="typing">简易中文打字效果</p>
</body>
</html>
- 15em宽度可以根据你要显示的中文来决定，保证光标最后停留在最后的文字后面。
-
white-space:nowrap是为了保证一行显示，如果我们固定一行高度的话，这个CSS声明理论上可以不要。 - steps可以让动画断断续续，而非连续执行。
- 光标使用的是
box-shadow模拟的，为什么不使用border呢？因为border被用来实现光标和文字撑开2像素间隙。因为overflow:hidden溢出剪裁是相对于border-box的，使用padding-right会露出几像素文字，效果就不完美了。当然，你也可以使用::after伪元素模拟，定位在最后，要更灵活些。 - 这个效果的光标颜色是跟着文字颜色走的。
中文和英文混合版
CSS实现打字效果的优点是简单快捷，不足就是上面的方法如果是中英文混合的，就有些吃力，不过也不是没有办法实现，我们可以定死高度为一行内容，让字符自然排列，这样，可以保证字符内容永远不会截断，因为不同字符程序时机有差异，反而效果更显真实。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.typing {
width: 18.5em; height: 1.25em;
border-right: 1px solid transparent;
animation: typing 3.5s steps(37, end), blink-caret .75s step-end infinite;
font-family: Consolas, Monaco;
word-break: break-all;
overflow: hidden;
}
/* 打印效果 */
@keyframes typing {
from { width: 0; }
to { width: 18.5em; }
}
/* 光标闪啊闪 */
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: currentColor; }
}
</style>
</head>
<body>
<p class="typing">简易中文效果dnssersjdss</p>
</body>
</html>
和上面中文实现区别在于：
- 去除
white-space:nowrap，没有强制单行显示，保证不会出现字符阶段场景。 - 设置等宽字体，这样宽度更好计算。
-
word-break:break-all使英文字符可以一个一个呈现。 -
steps功能符后面的数量正好是宽度的2倍，这样，每次step就移动0.5em宽度，正好是1/2中文和近似一个英文字符的宽度。
网友评论