打字动画

发表于 | 分类于 |

CSS typing animation
最近在看CSS大牛张鹏译著 CSS SECRETS，学到了不少，有种醍醐灌顶的感觉。
以下是从书中摘出的打字动画部分(CSS typing animation)。详情请看本书作者LEA VEROU的博客

效果

CSS typing animation

代码

1
<h1 id="h1">CSS typing animation </h1>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@keyframes typing {
    from {
        width: 0
    }
}
@keyframes caret {
    50% {
        border-color: transparent;
    }
}
#h1{
    width: 21ch;
    overflow: hidden;
    white-space: nowrap;
    border-right: .05em solid;
    animation:typing 6s steps(21) infinite,
                caret 1s steps(1) infinite;
}