代码
html
|
1
|
<div class="text">hello,world!</div> |
css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
:root { /* 字符数量 */ --steps: 12; /* 动画时间 */ --duration: 2.5s; /* 字体大小 */ --fontSize: 50px; /* 光标大小 */ --cursorSize: 20px;}.text { color: #333;; position: relative; display: inline-block; font-family: 'Courier New', Courier, monospace; font-size: var(--fontSize); line-height: 1;}.text::after { content: ''; width: var(--cursorSize); height: var(--fontSize); background-color: black; z-index: 2; position: absolute; animation: blink 1s var(--duration) step-end infinite, moveCursor var(--duration) steps(var(--steps)) forwards;}.text::before { content: ''; width: 100%; height: var(--fontSize); z-index: 1; position: absolute; background: linear-gradient(#fff, #fff) no-repeat top right; animation: showText var(--duration) steps(var(--steps)) forwards;}/* @ www.xuepai.net光标闪烁动画 */@keyframes blink { 0% { background-color: black; } 50% { background-color: transparent; } 100% { background-color: black; }}/* 光标移动动画 */@keyframes moveCursor { 0% { left: 0%; } 100% { left: 100%; }}/* @ www.haoshilao.net背景移动动画 */@keyframes showText { 0% { background-size: 100% 100%; } 100% { background-size: 0% 100%; }} |
注意
字体必须是等宽字体。因为光标每次移动的距离是是根据字符的数量 / 总宽度来决定的。