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

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

news 2025/11/24 22:18:27

创建打字机效果比您想象的要容易。虽然实现这种效果的最常见方法是使用 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

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/11/19 11:56:25

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/11/18 8:58:32

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

编程新知 2025/11/16 23:56:57

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/11/16 22:43:16

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2025/10/23 23:35:01

淘宝扭蛋机小程序系统开发：打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

编程新知 2025/11/18 6:23:20

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

编程新知 2025/11/17 12:15:06

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2025/11/16 22:11:07

从零手写Java版本的LSM Tree （一）：LSM Tree 概述

&#x1f525; 推荐一个高质量的Java LSM Tree开源项目&#xff01; https://github.com/brianxiadong/java-lsm-tree java-lsm-tree 是一个从零实现的Log-Structured Merge Tree&#xff0c;专为高并发写入场景设计。 核心亮点&#xff1a; ⚡ 极致性能&#xff1a;写入速度超…...

编程新知 2025/10/26 17:36:44

CppCon 2015 学习:REFLECTION TECHNIQUES IN C++

关于 Reflection&#xff08;反射&#xff09; 这个概念&#xff0c;总结一下&#xff1a; Reflection&#xff08;反射&#xff09;是什么&#xff1f; 反射是对类型的自我检查能力&#xff08;Introspection&#xff09; 可以查看类的成员变量、成员函数等信息。反射允许枚…...

编程新知 2025/11/21 19:34:17