打字机动画

前言

本文是对《CSS揭秘》中的打字机动画的记录,没有教程意义。

---

相关

在工作室首页也有一个打字机的效果。该效果是由肖高阳编码实现的。

通过审查元素可以发现是通过JS脚本动态的写入字符实现的。

在secret一书中的方法只需要借助CSS就可以实现。

---

先行知识

ch

ch是CSS中和字符相关的相对单位。

与ch相关的字符是0,也就是1ch便是1个0的宽度。该单位必须与等宽字体一起使用才有用。

等宽字体有Consolas,Monaco, monospace等等

steps()

请看我的博文animation-timing-function:steps

---

实现

HTML

<h1 id="h1">hello world66</h1>

CSS

@keyframes typing {
        from{width : 0}
    }
    
    @keyframes caret {
        50%{border-color: transparent;}
    }
    h1{
        font-family: "Consolas";
        width:11ch;
        white-space: nowrap;
        overflow: hidden;
        border-right: .5em solid;
        animation: typing 6s steps(11),
                   caret 1s  steps(1) infinite;
    }

如果需要动态适配文字内容,加上以下脚本即可

var h1 = document.getElementById("h1");
   function typing(target) {
       var len = target.textContent.length,
           s  = target.style;
       s.width = len + "ch";
       s.animationTimingFunction = "steps(" + len + "),steps(1)"
   }
   typing(h1);