JavaScript - 好玩的打字动画

效果预览：

🚀HTML版本

DOCTYPE html>
<html>
<head>
    <title>打字动画示例title>
    <style>
        .typewriter {
            color: #000;
            overflow: hidden; /* 隐藏溢出的文本 */
            white-space: nowrap; /* 不换行 */
            border-right: .15em solid #000; /* 添加光标样式 */
            animation: blink-caret .75s step-end infinite;
        }

        /* 光标闪烁 */
        @keyframes blink-caret {
            from, to {
                border-color: transparent
            }
            50% {
                border-color: #000
            }
        }
    style>

    <script>
        // 页面加载完成后执行
        window.onload = function () {
            // 获取文本节点
            var textNode = document.getElementById('text');

            // 获取文本内容
            var text = textNode.innerHTML;

            // 清空文本内容
            textNode.innerHTML = '';

            // 逐个显示字符的定时器
            setTimeout(() => {
                var timer = setInterval(function () {
                    // 检查是否已显示完全部字符
                    if (text.length <= 0) {
                        clearInterval(timer);
                        textNode.classList.remove('typewriter');
                        return;
                    }

                    // 取出第一个字符并在页面上显示
                    var char = text.substring(0, 1);
                    textNode.innerHTML += char;
                    // 移除已显示的字符
                    text = text.substring(1);
                }, 50);
            }, 2000);
        };
    script>
head>
<body>
<div>
    <span id="text" class="typewriter">横向领域和垂直领域是两个在不同层面上对领域或行业的分类方式。span>
div>
body>
html>

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

🚀Vue2版本

END.

相关阅读:
自动化开发任务：在PHP框架中实现自定义命令
DPDK ACL算法介绍（一）
中集集团新一代高效能智慧港口解决方案创新数字港口方案，工业级高性能港航AI产品规模化应用，领先人工智能高算力集群技术AI推理加速
ZIP压缩文件如何设置密码保护？
【Paper】2013_Attitude and Altitude Controller Design for Quad-Rotor Type MAVs
吴恩达学习笔记（五）——优化算法
数据仓库模型设计V2.0
在setup中使用计算属性
springboot+小区公共停车位管理毕业设计-附源码201517
20哈希表-三数之和

原文地址：https://blog.csdn.net/qq_42292831/article/details/132690384