CSS 文字打字机效果

198 字

1 分钟

CSS 文字打字机效果

2026-03-08

demo

CSS

/

HTML

/

JavaScript

效果说明#

使用纯 CSS 实现的打字机效果：

⌨️ 模拟逐字打出的动画
✏️ 闪烁的光标效果
🎨 可自定义颜色和速度

完整代码#

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
body {
6
    display: flex;
7
    justify-content: center;
8
    align-items: center;
9
    min-height: 100vh;
10
    background: #1a1a2e;
11
    font-family: 'Courier New', monospace;
12
}
13

14
.typewriter h1 {
15
    color: #e2e8f0;
16
    font-size: 2rem;
17
    overflow: hidden;
18
    border-right: 3px solid #63b3ed;
19
    white-space: nowrap;
20
    margin: 0 auto;
21
    letter-spacing: 0.1em;
22
    animation:
23
        typing 3.5s steps(30, end),
24
        blink-caret 0.75s step-end infinite;
25
}
26

27
@keyframes typing {
28
    from { width: 0 }
29
    to { width: 100% }
30
}
31

32
@keyframes blink-caret {
33
    from, to { border-color: transparent }
34
    50% { border-color: #63b3ed }
35
}
36
</style>
37
</head>
38
<body>
39
    <div class="typewriter">
40
        <h1>Hello, I'm a developer.</h1>
41
    </div>
42
</body>
43
</html>