一个通用的打字机效果

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

前言

相信经常看CSS文章的小伙伴，会经常见到关于单行文本的打字机效果。

目前的主要实现逻辑是

1. 通过设置文本容器的宽度从0变成文本的总长度，使得文字可以逐渐出现。不过这里的文本总长度是比较难获取的。大部分方案的计算方式 单文字px*总字数 或者 em*总字数
2. 保证文字可以逐个出现，通过设置文字出现动画的steps()

本文的实现逻辑任然是基础上面的思路，不过会加以改进，做一个通用的单行打字机效果。

容器

.text {
    max-width: 0; 
    white-space: nowrap;
    overflow: hidden;
    font-size: 16px;
    animation: typing 3s steps(var(--textlen)) ;

}    
 <div class="text" >我是打字机效果的文字</div>

容器的初始宽度设置为0，这里我使用的是max-width,当然也可以使用width。overflow保证多余文本不会出现。

会调用一个打字机的动画。steps使用了--textlen。这里的--textlen 用来保存文字的长度。

动画

设置宽度变化为文字总长度。

@keyframes typing {
    100% {
    	max-width: calc(var(--textlen) * 16px);
    }
}

js获取长度

这里是style.setProperty，直接修改CSS变量的值，所以就不需要自己先计算max-width和steps().

const text = document.getElementById("text");
const content = text.innerHTML;
text.style.setProperty("--textlen", content.length);

ch替换px

在CSS，ch是相对于数字0的大小。1ch等于一个0的宽度。在CSS中，在中文下，一个汉字是2ch。在英文下,一个字母是1ch。

所以利用这个特定，我们不需要考虑父元素px的情况。只需要:

中文：

max-width: calc(var(--textlen) * 16px);替换成max-width: calc(var(--textlen) * 2ch);

英文：

max-width: calc(var(--textlen) * 16px);替换成max-width: calc(var(--textlen) * 1ch);

请注意：根据设置的 font-family的不同，中文情况下2ch还是存在无法展示一个完整汉字的情况。

例如在 font-family:sans-serif;的情况下，是无法完整展示的。我目前还在研究这个问题。

在font-family:monospace的情况下，是可以完整展示的

效果

后记

对于纯CSS实现打字机效果，需要自己数出文本的长度，以及字符的个数，比较麻烦。而使用CSS变量加上JS的方式，避免了人工计数的繁琐。