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

【前端动效】HTML + CSS 实现打字机效果

news 2026/2/8 0:36:15

目录

1. 效果展示

2.  思路分析

2.1 难点

2.2 实现思路

3. 代码实现

3.1 html部分

3.2 css部分

3.3 完整代码

4. 总结

1. 效果展示

如图所示，这次带来的是一个有趣的“擦除”效果，也可以叫做打字机效果，其中一段文本从左到右逐渐从无到有的显示出来。

 

2.  思路分析

目标：使文本从不可见到逐渐显现，且有一定的过渡效果。

2.1 难点

难点1：使用线性渐变实现逐行显示的效果。

难点2：动画生效的前提条件是 数字类的属性。而这里控制线性渐变需要定义的是一个变量，所以这里就需要将变量转化成属性。

2.2 实现思路

写下两段一模一样的文字，将第二段文字覆盖第一段文字，设置第二段文字的背景和整体背景一致，且文字透明，再设置第二段文字的线性渐变(从透明到黑色渐变)。这样第一段文字就会慢慢的显示出来，就实现了上图所示的打字机效果。

3. 代码实现

接下来我会一步一步解说每段关键代码的含义。

3.1 html部分

<div class="container"><div class="box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>ullam illo nulla molestias! Nemo corporis ex <br>blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.</p><p class="eraser"><span class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>ullam illo nulla molestias! Nemo corporis ex <br>blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.</span></p></div></div>

这里有两段一模一样的段落，其实，真正显示的是第一段，而第二段的作用实际是用它的背景来覆盖第一段文字的内容，再通过背景渐变来浮现第一段文字的内容。

3.2 css部分

 body{background: black;}p{margin: 0;}.container{font-size: 20px;color: white;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans';}.box{width: 500px;height: 500px;margin: 80px auto;position: relative;line-height: 2;}

body 设置整个背景为黑色，.container 里设置文字的大小和颜色，.box 设置居中样式，并设置相对定位，方便两段文字重叠。

 .eraser{position: absolute;inset: 0;}
.text{--p: 30%;color: transparent;background: linear-gradient(to right, transparent var(--p), black calc(var(--p) + 5px));animation: erase 5s forwards linear;}

.eraser 设置绝定位，使两段文字重叠。 .text 里设置背景的线性渐变，并用变脸 --p 来代替渐变范围，通过控制 --p 的大小来实现文字逐步展现。

@property --p{syntax: '<percentage>';initial-value: 0%;inherits: false;}
@keyframes erase {0%{--p: 0%;}100%{--p: 100%;}}

上文已经说过，要想动画生效，前提条件是动画中变化的是一个数字类属性 ，而这里的 --p 却是一个变量，所以我们需要将变量通过 property 改为属性。

3.3 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><div class="box"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>ullam illo nulla molestias! Nemo corporis ex <br>blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.</p><p class="eraser"><span class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum magni iure nam dolore <br>ullam illo nulla molestias! Nemo corporis ex <br>blanditiis exercitationem ad cum sint quia, beatae consectetur explicabo animi.</span></p></div></div>
</body><style>body{background: black;}p{margin: 0;}.container{font-size: 20px;color: white;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans';}.box{width: 500px;height: 500px;margin: 80px auto;position: relative;line-height: 2;}.eraser{position: absolute;inset: 0;}@property --p{syntax: '<percentage>';initial-value: 0%;inherits: false;}.text{--p: 30%;color: transparent;background: linear-gradient(to right, transparent var(--p), black calc(var(--p) + 5px));animation: erase 5s forwards linear;}@keyframes erase {0%{--p: 0%;}100%{--p: 100%;}}
</style>
</html>

 

4. 总结

以上就是打字机效果的实现过程，本文参考于 渡一老师的大师课教程。如果对你有所帮助的话，不妨点赞加收藏，后面还会带来更多有趣的前端动效，关注我，不迷路😀。

更多前端动效点击下方链接↓ ↓ ↓

前端动效_借来一夜星光的博客-CSDN博客

相关文章：

【前端动效】HTML + CSS 实现打字机效果

目录 1. 效果展示 2. 思路分析 2.1 难点 2.2 实现思路 3. 代码实现 3.1 html部分 3.2 css部分 3.3 完整代码 4. 总结 1. 效果展示 如图所示&#xff0c;这次带来的是一个有趣的“擦除”效果&#xff0c;也可以叫做打字机效果&#xff0c;其中一段文本从左到右逐渐从…...

编程日记 2025/1/13 20:09:52

大疆上云API连接遥控器和无人机

文章目录 1、部署大疆上云API关于如何连接我们自己部署的上云API2、开启无人机和遥控器并连接自己部署的上云API如果遥控器和无人机没有对频的情况下即只有遥控器没有无人机的情况下如果遥控器和无人机已经对频好了的情况下 4、订阅无人机或遥控器的主题信息4.1、订阅无人机实时…...

编程日记 2025/1/13 20:01:43

JS逆向-atob和btoa分析

声明&#xff1a;本文只作学习研究&#xff0c;禁止用于非法用途&#xff0c;否则后果自负&#xff0c;如有侵权&#xff0c;请告知删除&#xff0c;谢谢&#xff01; 故事是这样的&#xff0c;有位读者朋友需要模拟登录一个网站&#xff1a; aHR0cDovL3d3dy56bGRzai5jb20v 我…...

编程日记 2025/1/13 20:00:41

primitive 编写着色器材质

import { nextTick, onMounted, ref } from vue import * as Cesium from cesium import gsap from gsaponMounted(() > { ... })// 1、创建矩形几何体&#xff0c;Cesium.RectangleGeometry&#xff1a;几何体&#xff0c;Rectangle&#xff1a;矩形 let rectGeometry new…...

编程日记 2025/1/13 19:56:37

计算机视觉算法实战——车道线检测

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​​​​ ​​​​​​​​​​​​ ​​​​​ 车道线检测是计算机视觉领域的一个重要研究方向&#xff0c;尤其在自动驾驶和高级驾驶辅助…...

编程日记 2025/1/13 19:55:36

网络安全-安全散列函数，信息摘要SHA-1，MD5原理

安全散列函数 单向散列函数或者安全散列函数之所以重要&#xff0c;不仅在于消息认证(消息摘要。数据指纹)。还有数字签名&#xff08;加强版的消息认证&#xff09;和验证数据的完整性。常见的单向散列函数有MD5和SHA 散列函数的要求 散列函数的目的是文件、消息或者其它数据…...

编程日记 2025/1/13 19:49:28

树莓派-5-GPIO的应用实验之GPIO的编码方式和SDK介绍

文章目录 1 GPIO编码方式1.1 管脚信息1.2 使用场合1.3 I2C总线1.4 SPI总线2 RPI.GPIO2.1 PWM脉冲宽度调制2.2 静态函数2.2.1 函数setmode()2.2.2 函数setup()2.2.3 函数output()2.2.4 函数input()2.2.5 捕捉引脚的电平改变2.2.5.1 函数wait_for_edge()2.2.5.2 函数event_detect…...

编程日记 2025/1/13 19:47:25

《零基础Go语言算法实战》【题目 2-10】接口的实现

《零基础Go语言算法实战》 【题目 2-10】接口的实现 请指出下面代码中存在的问题。 type Programmer struct { Name string } func (p *Programmer) String() string { return fmt.Sprintf("print: %v", p) } func main() { p : &Programmer{} p.String()…...

编程日记 2025/1/13 19:41:18

Win32汇编学习笔记10.OD插件

Win32汇编学习笔记10.OD插件-C/C基础-断点社区-专业的老牌游戏安全技术交流社区 - BpSend.net 筛选器异常插件 被调试程序: &#x1f4ce;TestUnh.zip 我们用OD条试试发现,无法断下 筛选器异常 异常产生之后 异常首先会给调试器 调试器不处理就会给 SEH , SEH 不处理的话有又给…...

编程日记 2025/1/13 19:40:17

在vscode中已经安装了插件Live Server，但是在命令面板确找不到

​​​​​ 1、VS Code缓存问题&#xff1a; 有时VS Code的缓存可能导致插件无法正确加载。尝试删除VS Code缓存文件夹&#xff08;如C:\Users\你的用户名\AppData\Roaming\Code&#xff09;中的文件&#xff0c;并重启VS Code。 2、重新安装插件&#xff1a; 尝试卸载Live S…...

编程日记 2025/1/13 19:37:14

C# SQL ASP.NET Web

留学生的课程答疑 按照要求完成程序设计、数据库设计、用户手册等相关技术文档&#xff1b; 要求 1. 计算机相关专业&#xff0c;本科以上学历&#xff0c;至少有1年以上工作经验或实习经历。 2. 熟练掌握WinForm程序开发&#xff0c;或ASP.NET Web编程。 3. 熟悉C#中网络…...

编程日记 2025/1/13 19:35:12

联想java开发面试题及参考答案

IP 协议是哪一层的？ IP 协议（Internet Protocol）属于网络层协议。 网络层主要负责将数据从源节点传输到目标节点，它在整个网络通信体系中起到了承上启下的关键作用。在分层网络模型中，下层（如数据链路层）为网络层提供物理链路的连接和帧传输服务。数据链路层关注的是在相…...

编程日记 2025/1/13 19:34:11

Node.js中的fs模块：文件与目录操作（写入、读取、复制、移动、删除、重命名等）

在Node.js中&#xff0c;fs模块提供了多种方法来处理文件和目录操作&#xff0c;使得数据的持久性保存和文件管理变得简单。下面将介绍文件读写、文件复制、文件移动、文件重命名、文件删除、文件夹创建与删除以及查看资源状态等常用操作。 首先&#xff0c;在使用写入和读取功…...

编程日记 2025/1/13 19:29:04

代码的形状：重构的方向

大概2周前写了一篇《代码的形状:从外到内的探索与实践》 涵树&#xff1a;代码的形状:从外到内的探索与实践 觉得这个话题还可以继续&#xff0c;它是一个从无形到有形的过程&#xff0c;而这个过程感觉就是王阳明先生说的“心即理”的探寻过程。 我讨论代码的形状&#xff…...

编程日记 2025/1/13 19:28:02

2021 年 3 月青少年软编等考 C 语言五级真题解析

目录 T1. 红与黑思路分析T2. 密室逃脱思路分析T3. 求逆序对数思路分析T4. 最小新整数思路分析T1. 红与黑 有一间长方形的房子，地上铺了红色、黑色两种颜色的正方形瓷砖。你站在其中一块黑色的瓷砖上，只能向相邻的黑色瓷砖移动。请写一个程序，计算你总共能够到达多少块黑色的…...

编程日记 2025/1/13 19:25:59

华为C语言编程规范总结

1.头文件更改会导致所有直接或间接包含该头文件的的C文件重新编译&#xff0c;会增加大量编译工作量&#xff0c;延长编译时间&#xff0c;因此&#xff1a; 1.1 头文件里尽量少包含头文件 1.2 头文件应向稳定的方向包含 2.每一个.c文件应有一个同名.h文件&#xff0c…...

编程日记 2025/1/13 19:22:56

XML 解析器：深入解析与高效应用

XML 解析器&#xff1a;深入解析与高效应用 引言 XML&#xff08;可扩展标记语言&#xff09;作为一种重要的数据交换格式&#xff0c;被广泛应用于各种系统和平台中。为了有效地处理和解析XML数据&#xff0c;XML解析器发挥着至关重要的作用。本文将深入探讨XML解析器的原理…...

编程日记 2025/1/13 19:20:54

《系统爆破：MD5易破，后台登录可爆破？》

声明&#xff1a;笔记的只是方便各位师傅学习知识&#xff0c;以下代码、网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 爆破Sales系统 一、爆破MD5 场景&#xff1a;已知MD5的加密字符串&#xff0c;如何得知明…...

编程日记 2025/1/13 19:18:52

基于微信小程序的书籍销售系统设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2025/1/13 19:07:38

SpringData-Redis缓存

Spring Framework是领先的全堆栈Java/JEE应用程序框架。它提供了一个轻量级容器和一个通过使用依赖注入、AOP和可移植服务抽象实现的非侵入性编程模型。 NoSQL存储系统为传统RDBMS提供了一种横向可扩展性和速度的替代方案。就实现而言&#xff0c;键值存储代表NoSQL空间中最大…...

编程日记 2025/1/13 19:05:35

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2026/2/7 13:37:25

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/2/7 4:36:23

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2026/1/23 10:10:53

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

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

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

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2026/2/4 4:39:19

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...

编程新知 2025/9/22 13:00:25

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

编程新知 2026/2/7 7:52:41

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36