JS CSS实现CodePen首页多行打字机动画，最通俗易懂版本

前言

鉴于网上多是单行打字机效果，总结从前者学到的知识推出此文。

灵感来源

（蓝色字体是超链接）

• CSS揭秘—打字动效
  • 使用等宽字体和ch长度单位为宽度做移动效果
  • steps步长详解
• 如何使用CSS为顺序中的每一行制作打字动画
  • 用循环遍历每排文字来设置延迟Delay
  • 实现开始时文本隐藏理解both
• CSS实现打字机动画效果
  • .outerText.length获取含所有子元素的总文本长度
  • 给动画时长设定为总长度*0.2

实现思路

1. 宽度从零开始，到总文本长度结束，步长为总文本长度
2. 光标用右边框实现，所以用inline-block来保证每排自适应内容宽度
3. 宽度动画从0开始，用js动态设置宽度。
4. 遍历每排，分别设置动画，动态给予持续时间、步长、延迟
5. 清除动画以取消光标闪烁，最后一排除外

最后的准备

• font-family: Consolas, Monaco, monospace;：设置等宽字体
• both设置第一帧（宽度0）开始，从而在开始时隐藏文本，停留在结束位置（不必要，因为已经设置了宽度，所以可以用backwards）
• step-end：steps(1)的简写
• 特殊： overflow: hidden;开启BFC重置基线，使得文本更紧凑（这点我也不是很理解）

正题

效果图

代码

HTML

 <code>
      <p class="HomepageAnonHeaderHero_line1-r+tWR"><span class="HomepageAnonHeaderHero_cy-JVLez">.rect</span> <span>{</span></p><br><p class="HomepageAnonHeaderHero_line2-j1x2U"><span class="HomepageAnonHeaderHero_cp-23ozZ">background</span><span>:</span> <span class="HomepageAnonHeaderHero_cy-JVLez">linear-gradient</span>(</p><br><p class="HomepageAnonHeaderHero_line3-pAv+x"><span class="HomepageAnonHeaderHero_co-+ACpm">-119deg</span>,</p><br><p class="HomepageAnonHeaderHero_line4-wTffx"><span class="HomepageAnonHeaderHero_cy-JVLez">$gray</span> <span class="HomepageAnonHeaderHero_co-+ACpm">0%</span>,</p><br><p class="HomepageAnonHeaderHero_line5-b+wBt"><span class="HomepageAnonHeaderHero_cy-JVLez">$dark-gray</span> <span class="HomepageAnonHeaderHero_co-+ACpm">100%</span>); }</p>
</code>复制

CSS

/* 打字机代码部分 */
 body{
     background-color: darkgoldenrod;/* 测试用 */
}
code p {
    display: inline-block;
    overflow: hidden;
 
    margin-top: 0;
    margin-bottom: 0;
 
    border-right: .15em solid transparent;
    height: 1.2em;
 
    font-family: Consolas, Monaco, monospace;
    line-height: 1;
    white-space: nowrap;/* 强制元素内文本不换行,必须 */
}
 
/* 打字动画 */
@keyframes dazi {
    from {
        width: 0;
    }
}
 
@keyframes caret {
    50% {
        border-right-color: #FFFFFF;
    }
}复制

JS

onload=(){
// 打字机动画
    const ps = $("code p");
    let yanchi = 0;
    ps.each((i, p) => {
    	// 设置宽度
        const w = p.outerText.length;
        p.style.width = `${w}ch`;
        //设置动画
        p.style.animation = `dazi ${w * 0.2}s steps(${w}) backwards, caret .5s step-end infinite`;
        //设置延迟
        p.style.animationDelay = `${yanchi}s`;//第一次是0s
        yanchi += w * 0.3+1;
        //清除动画
        if (i < ps.length - 1) {//保留最后一个
            setTimeout(() => {
                p.style.animation = "";
            }, yanchi * 1000);
        }
    });
   }复制

结语

从思路到关键字分析，应该算的上通俗易懂了。