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

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

news 2026/4/2 23:27:53

目录

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

Agentic SOC：AI原生时代，安全运营的终极范式革命

2026年RSAC全球网络安全大会上&#xff0c;一个现象级的行业转折正在发生&#xff1a;全场超过90%的主流安全厂商将核心展位与重磅发布聚焦于Agentic SOC&#xff0c;全球500强企业中超过62%已启动相关试点&#xff0c;21%完成了核心生产环境的规模化落地。与之形成强烈对比的是…...

编程新知 2026/4/2 23:00:52

webpack-blocks生态全景：从官方块到第三方扩展的完整盘点

webpack-blocks生态全景&#xff1a;从官方块到第三方扩展的完整盘点 【免费下载链接】webpack-blocks &#x1f4e6; Configure webpack using functional feature blocks. 项目地址: https://gitcode.com/gh_mirrors/we/webpack-blocks webpack-blocks是一个革命性的w…...

编程新知 2026/4/2 21:26:52

从内置函数到自定义算法：用 AMDP 驱动的 CDS Scalar Function 打开 ABAP CDS 的新扩展面

在很多 ABAP CDS 项目里，开发者都会遇到一个很现实的问题：系统预置函数够用，但不总是刚好够用。简单的数值换算、字符串处理、日期推导，内置能力通常已经覆盖；可一旦业务进入更复杂的区间，例如分摊比例计算、复合折扣推导、动态计费规则、评分算法封装，单纯依赖 CDS 表达…...

编程新知 2026/4/2 20:07:53

学Simulink——基于Simulink的基于扰动观测器（DOB）的负载扰动补偿

目录 手把手教你学Simulink——基于Simulink的基于扰动观测器（DOB）的负载扰动补偿​ 摘要​ 一、背景与挑战​ 1.1 负载扰动补偿的痛点与传统控制局限​ 1.1.1 应用场景与核心指标​ 1.1.2 传统PI控制的缺陷​ 1.2 DOB负载扰动补偿的核心优势​ 1.3 设计目标​ 二、系…...

编程新知 2026/4/2 20:01:52

一款实用汉化工具快速安装使用指南 -- cheat-engine中文版安装教程入口

文章目录安装方式安装后在哪里找到&#xff1f;&#xff08;重点补全&#xff09;使用说明温馨提示首先呢&#xff0c;大家可能在用 cheat engine (CE修改器&#xff09;的时候呢&#xff0c;可能总是使用的是英文版&#xff0c;用的不太舒服啊&#xff0c;这个时候呢&#xff…...

编程新知 2026/4/2 19:57:51

ai赋能设计：超越传统ps软件下载，用快马打造你的智能图像创作助手

AI赋能设计&#xff1a;超越传统PS软件下载&#xff0c;用快马打造你的智能图像创作助手 传统PS软件下载后&#xff0c;设计师往往需要花费大量时间在重复性操作上。而现在&#xff0c;通过InsCode(快马)平台结合AI模型&#xff0c;我们可以打造一个全新的智能图像创作助手&am…...

编程新知 2026/4/2 18:40:35

双倍效率：在快马平台中融合chatgpt实现智能代码生成与即时调试

最近在开发过程中&#xff0c;我发现了一个能显著提升效率的工作方式&#xff1a;将ChatGPT的智能生成能力与InsCode(快马)平台的即时调试环境结合起来。这种组合让我在代码编写、问题排查和逻辑优化上都节省了大量时间&#xff0c;今天就来分享一下具体的使用体验。 自然语言…...

编程新知 2026/4/2 18:22:28

抖音视频批量下载终极指南：5分钟掌握高效下载技巧

抖音视频批量下载终极指南&#xff1a;5分钟掌握高效下载技巧 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. …...

编程新知 2026/4/2 17:11:06

wordpress数据迁移---没有验证

迁移 WordPress 完整数据&#xff08;文章、页面、媒体、主题、插件、设置、评论、用户&#xff09;&#xff0c;核心是 备份旧站文件 数据库 → 新服务器配置环境 → 上传文件 导入数据库 → 修改配置 替换域名 / URL → 测试。下面分 插件一键迁移&#xff08;新手推荐&am…...

编程新知 2026/4/2 15:49:23

告别系统臃肿：Win11Debloat三步配置流程让Windows运行效率提升51%

告别系统臃肿&#xff1a;Win11Debloat三步配置流程让Windows运行效率提升51% 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declu…...

编程新知 2026/4/2 14:38:14