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

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

news 2025/9/19 8:02:05

目录

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

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/9/18 16:34:04

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/9/14 10:15:03

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/8/18 23:22:02

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/8/13 4:43:34

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/9/7 8:51:45

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/6/17 3:19:01

（一）单例模式

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

编程新知 2025/9/1 20:02:32

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/9/7 8:49:20

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/9/9 10:08:24

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2025/9/9 10:08:20