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

仅使用 CSS 创建打字机动画效果

news 2026/2/9 17:46:49

创建打字机效果比您想象的要容易。虽然实现这种效果的最常见方法是使用 JavaScript，但我们也可以使用纯 CSS 来创建我们的打字机动画。

在本文中，我们将了解如何仅使用 CSS 创建打字机动画效果。它简单、漂亮、容易。我们还将看看使用 CSS 与 JavaScript 创建这种效果的利弊。

要按照本文进行操作并对最终的打字机效果进行动画处理，您需要对 CSS 和 CSS 动画有基本的了解。如果你有这个基本知识，那么你就可以开始了。

使用 JavaScript 与 CSS 用于打字机动画的优缺点

最终，CSS 和 JavaScript 之间的选择将取决于您的特定需求和资源。让我们回顾一下每种方法的一些优点和缺点，以帮助您做出决定。

仅使用 CSS 比使用 JavaScript 更简单、更容易实现。这种方法使用的资源也比 JavaScript 少，这对于低端设备的性能非常重要。

但是，当仅使用 CSS 时，打字机动画可能不像使用 JavaScript 那样动态。此外，您可能无法处理更复杂的方案，例如动态更改动画的内容。

相比之下，使用 JavaScript 可以更好地控制动画。您可以微调效果的时间并使其更具动态性。JavaScript 可以比 CSS 更灵活、更具适应性，尤其是在您需要快速更改动画内容的情况下。

另一方面，JavaScript 的实现可能比 CSS 更复杂，特别是对于不熟悉它的开发人员。

如果你只需要一个简单的静态打字机效果，CSS可能是你要走的路。但是如果你需要更多的控制或动态内容，JavaScript可能是更好的选择。

现在让我们继续构建我们的打字机效果！

我们的打字机CSS动画项目概述

为了实现打字机效果，我们将对文本进行动画处理，使其逐渐显示文本。我们还将有一个光标，该光标键入文本，然后在完成键入后继续闪烁。

在我们深入研究之前，让我们回顾一下我们将使用的一些 CSS 属性。

我们将用于 @keyframes 动画，因为此规则使我们能够更好地控制要执行的动画。在我们的内容上使用属性 overflow 将确保每个单词都按照动画显示，而不是一次显示所有单词。

该 white-space 属性会将动画修剪为一行。同时，该 border-right-color 属性将帮助我们的光标从浅灰色变为透明，使动画具有逼真的闪烁光标触感。

最后，对 width 属性进行动画处理0%， 100% 以实现每个字母一次出现一个的效果。

设置项目

首先，让我们定义文本的结构，HTML我们将使用 CSS 使用打字机效果进行动画处理。在此项目的文件夹中，创建一个 index.html 文件，该文件将充当此项目演示的网页，并粘贴以下内容：

<!DOCTYPE html>
<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" /><link rel="stylesheet" href="new.css" /><title>Document</title></head><body><div class="container"><p class="first_line">Hello. My name is Temitope</p><p class="second_line">and this is a typewriter effect</p></div></body>
</html>

我们在此文件中包含一个包含两段文本的 div 容器。每个段落都有自己的类 - first_line 和 second_line ，分别 - 因为我们试图实现多行打字机效果。

这就是我们在 index.html 页面中需要做的所有事情。让我们继续设置网页样式并创建动画。

设置网页样式

在项目文件夹中创建另一个名为 style.css 并粘贴以下内容的文件：

@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap");
body {height: 100%;width: 100%;background: #111;color: #d8e0db;font-family: "Major Mono Display", monospace;
}
.container {margin-top: 5%;width: 100%;height: 100%;padding: 70px;
}
.first_line,
.second_line {white-space: nowrap; /* keep text in one line */overflow: hidden; /* hide text behind the cursor */margin: 0.5rem auto;font-family: "Major Mono Display", monospace;font-size: 2rem;font-weight: bold;
}
.first_line {border-right: 2px solid rgba(17, 17, 17, 0.9);
}
.second_line {border-right: 2px solid rgba(17, 17, 17, 0.9);
}

在我们的style.css文件中，我们尝试设置文本两行的样式。我们使用了前面讨论的一些 CSS 属性来使动画正常工作。

我们将该 overflow 属性 hidden 设置为防止项目中出现不必要的水平滚动和额外的空格。该 white-space: nowrap 设置会将我们的动画放入一行中。

最后，该 border-right 属性将充当我们的光标，我们希望在显示文本时闪烁。我们添加了其中两个 - 每行一个 - 但我们分配的黑色使它们暂时不可见。

您可能已经注意到，我们使用十六进制颜色代码 #111 将背景颜色设置为黑色，而我们的文本颜色 #d8e0db 转换为非常浅的棕褐色。您可以为自己的文本选择您喜欢的任何颜色，但要确保颜色彼此充分对比以符合辅助功能标准。

此外，我们正在使用 Major Mono Display 字体系列。就像背景和文本颜色一样，你还可以选择任何你想要的字体。但是，某些字体在打字机效果下比其他字体效果更好。

您可能需要选择干净的无衬线字体或等宽字体以获得最佳效果。另外，您将看到我们在 @keyframes 下面设置了一个width。您可能需要更改 以适应 width 您选择使用的任何字体，并确保光标闪烁动画正常工作。

使用 CSS @keyframes 创建打字机动画和 steps()

我们将使用 CSS @keyframes 为两行文本创建效果。我们希望所有文本都以逐个字母的方式键入，就像打字机一样：

@keyframes typewriter_1 {from {width: 0;}to {width: 38rem;}
}
@keyframes typewriter_2 {from {width: 0;}to {width: 40rem;}
}

规则 @keyframes 分别命名 typewriter_1 和 typewriter_2 。每个规则都有两个关键帧 — from 和 to 。to关键帧使用 rem ，一个可扩展的CSS单位，使我们的设计灵活、响应迅速且易于访问。

在关键帧中typewriter_1，我们将 from设置为0，to设置为38rem .这可确保当文本逐个字母显示时，我们的光标将从文本开头的宽度 0 到文本末尾的宽度 38 闪烁。我们还将typewriter_2 将 from 和 to 宽度分别设置为0和 40rem 。

我们将 @keyframes 创建一个动画，其中元素从左到右逐渐出现，就像打字机打印文本一样。

若要应用此动画，请使用该 animation 属性将其包含在字幕类选择器中。在我们的例子中，我们会将 div 字幕更新为以下内容：

.first_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for firstline  */animation: typewriter_1 6s 
}
.second_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for econd_line  */animation: typewriter_2 5s 
}

动画与动画速度一起添加，以流畅地显示我们的文本。结果如下：

图片

它看起来不像我们想要的方式，对吧？请记住，我们的目标是让它看起来像打字机的工作方式——也就是说，以逐个字母的方式打字。为了实现这一点，我们将使用 steps() CSS函数。

CSS 中的函数用于指定计时steps()函数中的间隔数或步数。在我们的例子中，我们将在我们的 animation 属性中使用它来允许我们的文本逐个字母显示：

.first_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for text + cursor */animation: typewriter_1 6s steps(33) 1s 1 normal both;}
.second_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for text + cursor */animation: typewriter_2 5s steps(31) 1s 1 normal both;}

在上面的代码中，您会注意到步骤分别是33和 31 。我们通过自己计算文本中的字符数来获得这些数字。在我们的浏览器中检查结果：

图片

现在，这一切都走到了一起。但是，请注意，在我们的结果中，光标没有显示或闪烁。我们希望光标闪烁，以使打字机动画看起来更逼真。此外，两行文本同时出现，这不是打字机的外观。

为了解决这个问题，我们还将使用@keyframes为每行的光标创建动画：

@keyframes first_cursor {from {border-right-color: rgba(17, 17, 17, 0.9);}to {border-right-color: rgba(255, 255, 255, 0.8);}
}
@keyframes second_cursor{from {border-right-color: rgba(17, 17, 17, 0.9);}to {border-right-color: rgba(255, 255, 255, 0.8);}
}

在上面的代码中， border-right-color 两个光标的属性设置将在移动时从黑色变为白色。这将为我们的每个光标提供闪烁效果。

我们将在文本类的属性中包含 animation 此项，并将每个动画方向属性设置为infinite。这将使光标消失并 780ms 永远重新出现：

.first_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for text + cursor */animation: typewriter_1 6s steps(33) 1s 1 normal both,first_cursor 900ms steps(33) 8;
}
.second_line {border-right: 2px solid rgba(17, 17, 17, 0.9);/* define animation types for text + cursor */animation: typewriter_2 5s steps(31) 1s 1 normal both,second_cursor 900ms steps(31) infinite;-webkit-animation-delay: 7s;animation-delay: 7s;
}

在上面的代码中，我们添加了 infinite 第二个光标动画，因为我们的文本在第二行结束。这将使光标消失并 900ms 永远重新出现。

我们还在second_line 中添加 了 7 秒 delay ，因此它不会与我们的第一行类型和显示同时运行。

全部完成！在浏览器中查看结果时，我们现在应该看到以下内容：

图片

恭喜！我们只是只用CSS制作了一个打字机动画效果。

请注意，如果您只需要一行文本，则可以执行相同的步骤。唯一的区别是添加到 infinite 第一行的动画中，因为没有第二行。这将确保光标在单行末尾连续闪烁。您也不需要像我们在第二行中那样添加延迟属性。

总结

在本文中，我们研究了如何使用CSS创建完全没有JavaScript的打字机动画效果。只需基本的HTML代码和非复杂的CSS语法即可轻松做到这一点。另外，它没有浏览器支持问题！

相关文章：

仅使用 CSS 创建打字机动画效果

创建打字机效果比您想象的要容易。虽然实现这种效果的最常见方法是使用 JavaScript&#xff0c;但我们也可以使用纯 CSS 来创建我们的打字机动画。 在本文中&#xff0c;我们将了解如何仅使用 CSS 创建打字机动画效果。它简单、漂亮、容易。我们还将看看使用 CSS 与 JavaScrip…...

编程日记 2023/8/13 3:27:17

pytest fixture 高级使用

一、fixture中调用fixture 举例&#xff1a; 输出&#xff1a; 说明&#xff1a;登录fixture 作为参数传递到登出方法中&#xff0c;登录方法的返回值就可以被登出方法使用 二、在fixture中多参数的传递&#xff08;通过被调用函数传参&#xff09; 举例&#xff1a; 输出&a…...

编程日记 2023/8/13 3:26:15

远程控制医疗行业应用解析：如何满足医院合规需求？

远程控制医疗行业应用解析&#xff1a;如何满足医院合规需求&#xff1f; 作为一个起源于IT行业的技术&#xff0c;以远程桌面为基础的远程控制技术目前在医疗领域也已经有了比较广阔的应用前景&#xff0c;尤其是在医疗数字化系统/设备的远程运维场景&#xff0c;已经有了一些…...

编程日记 2023/8/13 3:25:14

【C++】开源：glog日志库配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍glog日志库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次…...

编程日记 2023/8/13 3:24:13

使用 React Native CLI 创建项目

React Native 安装的先决条件和设置 需要掌握的知识点 掌握 JavaScript 基础知识掌握 React 相关基础知识掌握 TypeScript 相关基础知识 安装软件前需要首先安装Chocolatey。Chocolatey 是一种流行的 Windows 包管理器。 安装 nodejs 和 JDK choco install -y nodejs-lts …...

编程日记 2023/8/13 3:23:12

在R中将列表（list）转换为向量（vector）

问题&#xff1a;将列表中的所有元素“展平”&#xff0c;赋值给一个向量 解决方案&#xff1a;使用unlist()函数&#xff1b; 在许多情况下需要向量&#xff0c;例如&#xff0c;baseR中的许多统计函数需要一个向量作为输入&#xff0c;例如&#xff0c;如果iq.score是一个包…...

编程日记 2023/8/13 3:22:10

access怎么做进销存？借助access开发进销存管理应用

我不太推荐使用Access&#xff0c;因为他的缺点还是比较明显的&#xff1a; 1、软件自身限制 不能用于互联网&#xff1a;使用Access制作好的管理软件&#xff0c;访问页只能在局域网中使用&#xff1b;只能在Windows上运行&#xff1a;Access仅支持windows的运行环境&#x…...

编程日记 2023/8/13 3:21:09

css实现卡片的左上角有一个三角形的遮盖效果

需求: 卡片的左上角有一个绿色的三角形标签,用来区分状态 实现: .vCard{position: relative;overflow: hidden; } .vCard::before {content: "";position: absolute;top: 0;left: 0;width: 0;height: 0;border-bottom: 20px solid transparent;border-left: 20px …...

编程日记 2023/8/13 3:20:08

中间件RabbitMQ消息队列介绍

1. MQ的相关概念 1.1 什么是MQ MQ&#xff08;message queue&#xff09;&#xff0c;从字面意思上看&#xff0c;本质是个队列&#xff0c;FIFO先入先出&#xff0c;只不过队列中存放的内容是message而已&#xff0c;还是一种跨进程的通信机制&#xff0c;用于上下游传递消息…...

编程日记 2023/8/13 3:19:07

MySQL不知道密码，直接修改密码

很简单&#xff0c;我们跳过验证&#xff0c;直接进去修改就好 修改配置文件 vim /etc/my.cnf在[mysqld]下直接添加配置 skip-grant-tables如图&#xff1a; 保存&#xff0c;退出即可。 重启服务 service mysqld restart进入MySQL #(直接点击回车&#xff0c;密码为空)…...

编程日记 2023/8/13 3:18:05

Win10关闭自动更新的方法和影响（Windows modules installer worker cpu占用过高）

目录 问题描述&#xff1a; Windows modules installer worker是什么&#xff1f; Win10关闭自动更新的方法&#xff1a; Win10关闭自动更新的影响&#xff1a; 问题描述&#xff1a; 有时我们在使用电脑的过程中会突然出现电脑运行过慢&#xff0c;发热&#xff0c;风扇噪…...

编程日记 2023/8/13 3:17:04

Xcode 基座打包

Xcode基座打包-APP更新版本内容无效 问题&#xff1a;解决&#xff1a; 问题&#xff1a; 使用xcode基座打包之后&#xff0c;上传到appstore进行提审发布。 用户在appstore商城进行更新下载&#xff0c;打开更新后的APP发现版本号是最新的&#xff0c;APP里面的其他内容还是上…...

编程日记 2023/8/13 3:16:03

最强自动化测试框架Playwright（9）- 下载文件

对于页面下载的每个附件&#xff0c;都会发出 page.on&#xff08;“download”&#xff09; 事件。 下载开始后&#xff0c;将发出下载事件。下载完成后&#xff0c;下载路径将变为可用 所有这些附件都下载到一个临时文件夹中。可以使用事件中的下载对象获取下载 URL、文件系…...

编程日记 2023/8/13 3:13:57

python爬虫实战(1)——网站小说

整本小说的爬取保存 目标大致思路页面的爬取解析—XPath请求网页内容解析网页内容正文爬取与解析单个页面数据获取爬取所有页面 数据清洗 经过学习基础&#xff0c;我们学以致用一下子&#xff0c;爬取小说&#xff0c;注意这个小说本身是免费的哦&#xff0c;以后再进阶。 本次…...

编程日记 2023/8/13 3:12:54

git: ‘lfs‘ is not a git command. see ‘git --help‘

在克隆hugging face里面的项目文件的时候&#xff0c;需要用到git lfs&#xff0c;本文介绍安装git lfs方法 在Ubuntu下 curl -s https://packagecloud.io/install/repositories/github/git-lfs/script.deb.sh | sudo bash sudo apt-get install git-lfs在Windows下 到这个链…...

编程日记 2023/8/13 3:11:53

python案例

这猜单词游戏。具体步骤如下&#xff1a; 导入random模块&#xff0c;用于随机选择单词。 设置初始生命次数为3。 创建一个单词列表words&#xff0c;其中包含了一些单词。 使用random.choices()函数从单词列表中随机选择一个单词作为秘密单词secret_word。 创建一个clue列表&a…...

编程日记 2023/8/13 3:10:52

leetcode 63. 不同路径 II

2023.8.9 这题是不同路径I的升级版&#xff0c;在路径上增加了障碍物&#xff0c;有障碍物的地方无法通过。 我的思路依然还是使用动态规划&#xff0c;dp[i][j]的含义依然是到&#xff08;i&#xff0c;j&#xff09;这个位置的路径个数。只需要在dp数组中将有障碍物的地方赋为…...

编程日记 2023/8/13 3:09:51

c语言每日一练(5)

前言&#xff1a;每日一练系列&#xff0c;每一期都包含5道选择题&#xff0c;2道编程题&#xff0c;博主会尽可能详细地进行讲解&#xff0c;令初学者也能听的清晰。每日一练系列会持续更新&#xff0c;暑假时三天之内必有一更&#xff0c;到了开学之后&#xff0c;将看学业情…...

编程日记 2023/8/13 3:08:48

pycharm配置conda虚拟环境

&#x1f4d5;作者简介&#xff1a;热编程的贝贝&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步健身&#xff0c;喜爱音乐的一位博主。 &#x1f4d7;本文收录于贝贝的日常汇报系列&#xff0c;大家有兴趣的可以看一看 &#x1f4d8;相关专栏深度学习、…...

编程日记 2023/8/13 3:07:47

ubuntu 如何命令行打开系统设置(Wifi,网络,应用程序...)

关于GNOME GNOME 是一个自由、开放源代码的桌面环境&#xff0c;它运行在 Linux 和其他类 UNIX 操作系统上。它是 GNU 项目的一部分&#xff0c;旨在为 Linux 操作系统提供一个现代化、易于使用的用户界面。 GNOME 桌面环境包括许多应用程序&#xff0c;例如文件管理器、文本编…...

编程日记 2023/8/13 3:06:46

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/2/7 17:29:24

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2026/2/6 19:29:20

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2026/2/4 22:41:52

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

编程新知 2025/11/7 10:02:17

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

编程新知 2026/2/5 9:30:45