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

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

news 2025/6/23 10:57:07

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

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/6/21 3:15:53

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2025/6/21 6:23:38

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/6/21 15:36:12

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/6/21 20:42:28

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/6/15 9:22:28

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/6/21 5:26:27

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

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

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

热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

编程新知 2025/6/19 12:32:26

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...

编程新知 2025/6/19 16:08:19

从实验室到产业：IndexTTS 在六大核心场景的落地实践

一、内容创作&#xff1a;重构数字内容生产范式 在短视频创作领域&#xff0c;IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色&#xff0c;生成的 “各位吴彦祖们大家好” 语音相似度达 97%&#xff0c;单条视频播放量突破百万…...

编程新知 2025/6/16 8:34:00