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

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

news 2025/7/8 10:04:13

在这里插入图片描述

💂作者简介： 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

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/7/7 9:14:28

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/7/7 12:34:04

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/7/7 16:55:31

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/7/7 0:36:58

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/7/4 14:40:43

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/7/6 20:17:05

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

编程新知 2025/6/21 0:49:44

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...

编程新知 2025/7/6 19:33:46