标签搜索
隐藏侧边栏

一个通用的打字机效果

搞前端的半夏
2022-05-17 / 0 评论 / 0 点赞 / 355 阅读 / 1,328 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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;的情况下,是无法完整展示的。我目前还在研究这个问题。

image-20211127141211046

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

image-20211127141339613

效果

打字机

后记

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

0

评论区