Sail


手在键盘敲很轻


打字机动画

前言

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


相关

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

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

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


先行知识

ch

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

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

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

steps()

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


实现

HTML

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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;
}

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

1
2
3
4
5
6
7
8
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);
© 2016-2019. | 由Hexo强力驱动 | 主题Huno | 渝ICP备17002561号 | 不装弱了,我要做大佬