当前位置： 首页 > news >正文

【H5 | CSS | JS】如何实现网页打字机效果？快收下这份超详细指南（附源码）

news 2026/2/9 16:00:16

在这里插入图片描述

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。

💅文章概要： 各位小伙伴们大家好呀，今天又是久违的系列专刊更新——《优秀前端案例分享》，今天给大家带来的优质案例是网页实现打字机效果，让我们一起来看看吧！

🤟每日一言： 梦想总还是要有的，万一实现了呢？

目录

  • 前言
  • 打字机效果预览
  • 实现方式
    •  CSS实现
    •  JS组件库
      •   Typed.js
        •    Typed.js安装
        •    Typed.js的使用
        •    Typed.js参数
      •   TypeLighter
        •    TypeLighter演示案例代码
        •    TypeLighter演示效果预览
        •    TypeLighter参数
      •   Easy-typer-js
  • 写在最后的话

前言

在这里插入图片描述

各位小伙伴们大家好呀，今天又是久违的系列专刊更新——《优秀前端案例分享》，今天给大家带来的优质案例是网页实现打字机效果，让我们一起来看看吧！

打字机效果预览

  下面为大家展示的是网页实现打字机效果的预览图：

在这里插入图片描述

在这里插入图片描述

实现方式

  笔者认为：实现网页打字机效果有两种方式来实现是比较好的。第一种方法是纯原生CSS手撸，第二种方法是使用JS组件库来实现。

在这里插入图片描述

 CSS实现

  使用纯CSS实现打字机效果主要用到了@keyframes 和伪元素 :after，在下方给了一个CSS实现网页打字机效果的示例代码，小伙伴们可以学习一下。

@keyframes的语法规则如下：

@keyframes animationname {keyframes-selector {css-styles;}}
  • 使用@keyframes规则，你可以创建动画。
  • 创建动画是通过逐步改变从一个CSS样式设定到另一个。
  • 在动画过程中，您可以更改CSS样式的设定多次。
  • 指定的变化时发生时使用%，或关键字“from”和“to”，这是和0%到100%相同。
  • 0%是开头动画，100%是当动画完成。

  下面给出一段利用纯CSS实现的打字机效果代码，大家可以复制粘贴查看实现效果！

<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Typing</title><link rel="stylesheet" href="style.css"><style>* {margin: 0;padding: 0;font-family: monospace, sans-serif;font-weight: bold;
}
.flex {display: flex;justify-content: center;align-items: center;
}
.container {height: 100vh;background-color: #fff;;
}.content {animation: content-slide-in 2s steps(13) forwards;overflow: hidden;white-space: nowrap;position: relative;
}.content::after {content: '';position: absolute;right: 0;height: 16px;animation: sprinkle-bling .5s steps(2) infinite;
}@keyframes content-slide-in {from {width: 0;}to {width: 13ch;}
}@keyframes sprinkle-bling {from {border-right: 1px solid transparent;}to {border-right: 1px solid #000;}
}</style>
</head>
<body><div class="container flex"><div class="content">Hello, World!</div></div>
</body>
</html>

 JS组件库

  JS组件库可以快速的实现网页打字机效果，并且可以多元定制化打字效果，强烈推荐使用JS组件库方法！下面给大家介绍几个轻量级的JS打字机组件库:

  Typed.js

在这里插入图片描述
  Typed.js是一个类型库，输入任意字符串，它将以打字方式显示出来。您可以设置打字速度，退格等参数。

   Typed.js安装

  （一）CDN引入

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

  （二）npm安装

npm install typed.js

   Typed.js的使用

  （一）设置参数

  <script>var typed = new Typed('.typed', {strings: ["SAP ABAPer", "FICO Consultant^1000"], //输入内容, 支持html标签typeSpeed: 100, //打字速度backSpeed: 50, //回退速度loop: true,});  </script>

  （二）使用<span>标签引用上面设置的id

<span id="typed" style="white-space: pre-wrap;line-height: 30px;"></span>

   Typed.js参数

  更多参数设置请参考原作者github仓库——Typed.js

  TypeLighter

在这里插入图片描述

  TypeLighter.js是实现打字机效果的一个类型库，输入任意字符串，它将以打字方式显示出来。您可以设置多种参数进行个性化配置。

   TypeLighter演示案例代码

  下面给出一段利用TypeLighter库实现的打字机效果代码，大家可以复制粘贴查看实现效果！

<script src ="https://cdn.jsdelivr.net/npm/typelighterjs/typelighter.min.js"></script><style>p{/*父级*/position:ablative;/*子级*/position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
</style>
<p>Deeply <span class="typeWriter" data-max="1.5" data-text='["satisfying.","customizable."]'</span></p>

   TypeLighter演示效果预览

在这里插入图片描述

   TypeLighter参数

属性默认值使用
data-textNull保持字符串的数组一个接一个地写入。
data-speed1写入速度与此整数成比例。
data-start500 (ms)写下一个字符串之前的延迟。
data-end2000 (ms)删除当前字符串之前的延迟。
data-randomTrue启用后，TypeWriter会在写入或删除下一个字符之前等待一段随机时间。
data-maxInfinityTypeWriter停止之前的最大完整迭代次数。
data-dltSpeedTrue启用后，删除给定字符串的速度是写入字符串的两倍。
data-checkVisibleFalse启用后，当元素出现在视口中时，动画将立即开始。

  Easy-typer-js

在这里插入图片描述

  easy-typer-js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果.而且对MVVM框架支持完美，还兼容原生JS.

  关于对easy-typer-js库的详细介绍可以看这篇博主文章：[JS插件]功能十分强大的打字机效果: easy-typer-js，在此不过多赘述。

写在最后的话

  本文花费大量时间介绍了多种方式实现网页打字机效果，希望能帮助到各位小伙伴，码文不易，还望各位大佬们多多支持哦，你们的支持是我最大的动力！

在这里插入图片描述

✨原创不易，还希望各位大佬支持一下\textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！\textcolor{9c81c1}{点赞，你的认可是我创作的动力！}点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！\textcolor{ed7976}{收藏，你的青睐是我努力的方向！}收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！\textcolor{98c091}{评论，你的意见是我进步的财富！}评论，你的意见是我进步的财富！

相关文章：

【H5 | CSS | JS】如何实现网页打字机效果？快收下这份超详细指南（附源码）

&#x1f482;作者简介&#xff1a; THUNDER王&#xff0c;一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读&#xff0c;同时任汉硕云&#xff08;广东&#xff09;科技有限公司ABAP开发顾问。在学习工作中&#xff0c;我通常使用偏后…...

编程日记 2023/5/1 13:39:47

Airbyte，数据集成的未来

Gartner 曾预计&#xff0c;到 2025 年&#xff0c;80% 寻求扩展数字业务的组织将失败。因为他们没有采用现代方法来进行数据和分析治理。数据生态是基础架构生态的最重要一环&#xff0c;数据的处理分发与计算&#xff0c;从始至终贯穿了整个数据流通生态。自从数据集中在数据…...

编程日记 2023/4/29 0:37:14

00.内容安排

内容安排如下01.Linux基本命令0.2 vim编辑器&#xff0c;gcc、gdb、makefile、动/静态库制作使用03.文件 I/O 常用函数、文件读写原理、进程控制快概念、阻塞、非阻塞概念04.文件常用操作函数、目录常用操作函数、重定向05.进程控制fork、exec函数组、进程回收 wait/waitpid06.…...

编程日记 2023/5/7 16:37:21

FreeRTOS任务基础知识

单任务和多任务系统单任务系统单任务系统的编程方式&#xff0c;即裸机的编程方式&#xff0c;这种编程方式的框架一般都是在main&#xff08;&#xff09;函数中使用一个大循环&#xff0c;在循环中顺序的执行相应的函数以处理相应的事务&#xff0c;这个大循环的部分可以视为…...

编程日记 2023/5/6 13:52:38

JDBC-API详解、SQL注入演示、连接池

文章目录JDBC1&#xff0c;JDBC概述1.1 JDBC概念1.2 JDBC本质1.3 JDBC好处2&#xff0c;JDBC快速入门2.1 编写代码步骤2.2 具体操作3&#xff0c;JDBC API详解3.1 DriverManager3.2 Connection &#xff08;事务归我管&#xff09;3.2.1 获取执行对象3.2.2 事务管理3.3 Stateme…...

编程日记 2023/5/5 14:47:55

C 学习笔记 —— 动态分配内存（malloc）

文章目录分配内存malloccallocrealloc创建数组方式free的重要性举例常见动态分配内存错误忘记检查所请求的内存对NULL指针进行解引用对分配的内存越界访问释放一块内存后&#xff0c;继续使用释放一块内存的一部分是不允许的内存泄漏分配内存 当一个数组声明时&#xff0c;需要…...

编程日记 2023/4/29 0:09:58

RK3588通用布线设计指南

&#xff08;1&#xff09;走线长度应包含过孔和封装。&#xff08;2&#xff09;由于表贴器件的焊盘会导致阻抗降低&#xff0c;为减小阻抗突变的影响&#xff0c;建议在表贴焊盘的正下方按焊盘大小挖去一层参考层。常用的表贴器件有&#xff1a;电容、 ESD、共模抑制电感、连…...

编程日记 2023/5/7 3:51:45

ChatGPT也懂如何设计开发板！？

到底应该如何设计一款开发板&#xff1f;我们问了一下最近风很大的ChatGPT&#xff0c;得出了这样的回答&#xff1a; 或者这样的回答&#xff1a; 显而易见&#xff0c;RK3568开发板是一款功能丰富&#xff0c;性能优异&#xff0c;易于开发的高性能开发板&#xff0c;适用于各…...

编程日记 2023/5/4 11:13:08

去了字节跳动，才知道年薪40W的测试居然有这么多？

今年大环境不好&#xff0c;内卷的厉害&#xff0c;薪资待遇好的工作机会更是难得。最近脉脉职言区有一条讨论火了&#xff1a; 哪家互联网公司薪资最‘厉害’&#xff1f; 下面的评论多为字节跳动&#xff0c;还炸出了很多年薪40W的测试工程师 我只想问一句&#xff0c;现在的…...

编程日记 2023/5/9 15:00:59

2023前端面试知识点总结

原型 JavaScript中的对象都有一个特殊的 prototype 内置属性&#xff0c;其实就是对其他对象的引用 几乎所有的对象在创建时 prototype 属性都会被赋予一个非空的值&#xff0c;我们可以把这个属性当作一个备用的仓库 当试图引用对象的属性时会出发get操作&#xff0c;第一步时…...

编程日记 2023/5/9 12:29:38

FL StudioV21电脑版水果编曲音乐编辑软件

这是一款功能十分丰富和强大的音乐编辑软件&#xff0c;能够帮助用户进行编曲、剪辑、录音、混音等操作&#xff0c;让用户能够全面地调整音频。FL水果最新版是一款专业级别的音乐编曲软件&#xff0c;集合更多的编曲功能为一身&#xff0c;可以进行录音、编辑、制作、混音、调…...

编程日记 2023/5/9 2:05:08

【数据结构初阶】实现顺序表的简单功能

目录一.线性表和顺序表的概念二.顺序表的实现1.动态顺序表的创建2.初始化顺序表3.打印顺序表4.销毁顺序表5.检查容量6.头插 尾插7.头删 尾删三.使用下标插入删除1.删除指定位置2.向指定位置插入指定数一.线性表和顺序表的概念 线性表是n个具有相同特性的数据元素的有限序列。 线…...

编程日记 2023/5/3 19:44:42

华为OD机试题，用 Java 解【停车场车辆统计】问题

最近更新的博客 华为OD机试 - 猴子爬山 | 机试题算法思路 【2023】华为OD机试 - 分糖果（Java） | 机试题算法思路 【2023】华为OD机试 - 非严格递增连续数字序列 | 机试题算法思路 【2023】华为OD机试 - 消消乐游戏（Java） | 机试题算法思路 【2023】华为OD机试 - 组成最大数…...

编程日记 2023/5/7 4:16:56

Linux中使用Docker部署Mysql数据库

前言 和朋友一起搞一个项目&#xff0c;分了一下工作&#xff0c;但是mysql迟迟安装不上&#xff0c;程序都在一个环境里确实容易出现很多问题&#xff0c;浪费时间和经历在这些配置上&#xff0c;好在有docker了&#xff0c;就在docker里搭建一个Mysql数据库使用吧&#xff0…...

编程日记 2023/5/5 8:25:09

JPDA(远程调试)使用步骤

JPDA(Java Plateform Debugger Architecture) 更改启动脚本 vi catalina.sh 127行 CATALINA_OPTS “-Xdebug -Xrunjdwp:transportdt_socket,servery,suspendn,address5888” 指定端口&#xff0c;默认是8000 377行以jpda方式启动tomcat ./catalina.sh jpda start tomcat以这个…...

编程日记 2023/5/5 8:27:01

磷脂-聚乙二醇-丙烯酸酯；DSPE-PEG-AC试剂说明；DSPE-PEG-Acrylate科研用

中文名称&#xff1a;磷脂-聚乙二醇-丙烯酸酯 丙烯酸酯-聚乙二醇-磷脂 简称&#xff1a;DSPE-PEG-AC&#xff1b;DSPE-PEG-Acrylate 溶剂&#xff1a;溶于部分常规有机溶剂 PEG分子量:1000&#xff1b;2000&#xff1b;3400&#xff1b;5000等等 注意事项&#xff1a;避免…...

编程日记 2023/5/1 10:34:22

C++入门：异常处理

异常是程序在执行期间产生的问题。C 异常是指在程序运行时发生的特殊情况&#xff0c;比如尝试除以零的操作。异常提供了一种转移程序控制权的方式。C 异常处理涉及到三个关键字&#xff1a;try、catch、throw。throw: 当问题出现时&#xff0c;程序会抛出一个异常。这是通过使…...

编程日记 2023/4/28 14:34:20

C/C++每日一练(20230225)

目录 1. 工龄问题求解 ★ 2. 字符图形输出 ★★ 3. LRU 缓存机制 ★★★ 1. 工龄问题求解 给定公司N名员工的工龄&#xff0c;要求按工龄增序输出每个工龄段有多少员工。输入首先给出正整数N&#xff0c;即员工总人数&#xff1b; 随后给出N个整数&#xff0c;即每个员工…...

编程日记 2023/5/5 23:16:04

nyist最终淘汰赛第一场

我出的题喜欢吗 我要水题解所以每一篇题解都分一个博客 A 题解链接: Atcoder abc257 E_霾まる的博客-CSDN博客 构造贪心题 在本次淘汰赛中较难 B 题解链接: atcoder abc217 D_霾まる的博客-CSDN博客 STL二分题, 当然你可以数组二分, 相对麻烦一点 在本次淘汰赛中较简单…...

编程日记 2023/5/4 22:56:52

《零成本实现Web自动化测试--基于Selenium》 Selenium-RC

一. 简介 Selenium-RC可以适应更复杂的自动化测试需求&#xff0c;而不仅仅是简单的浏览器操作和线性执行。Selenium-RC能够充分利用编程语言来构建更复杂的自动化测试案例&#xff0c;例如读写文件、查询数据库和E-mail邮寄测试报告。 当测试案例遇到selenium-IDE不支持的逻辑…...

编程日记 2023/5/8 20:19:02

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2026/2/8 20:42:58

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2026/2/7 17:35:15

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2026/1/27 14:18:20

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2026/1/31 8:55:37

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2026/2/4 16:04:15