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

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

news 文章来源：https://blog.csdn.net/qq_58195504/article/details/145100221 2025/2/6 7:07:13

目录

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

Hadoop3.3.4伪分布式环境搭建

文章目录 前言一、准备1. 下载Hadoop2. 配置环境变量3. 配置免密 二、Hadoop配置1. hadoop-env.sh2. hdfs-site.xml3. core-site.xml4. mapred-site.xml5. yarn-site.xml 三、格式化四、启动 前言 hadoop学习——伪分布式环境——普通用户搭建 一、准备 1. 下载Hadoop 2. 配…...

编程日记 2025/1/13 19:01:30

【VUE 指令学习笔记】

v-bind :单向绑定解析表达式&#xff0c;可简写为:xxx v-model :双向数据绑定。 v-for&#xff1a;遍历数组/对象/字符串 v-on&#xff1a;绑定事件监听&#xff0c;可简写为。 v-if:条件渲染(动态控制节点是否存存在) v-else:条件渲染(动态控制节点是否存存在) v-show:条件渲染…...

编程日记 2025/1/13 18:59:27

【深度学习】布匹寻边：抓边误差小于3px【附完整链接】

布匹寻边 项目简介 布匹寻边是指布料裁剪过程中&#xff0c;通过AI寻边技术自动识别布匹的边缘&#xff0c;将检测到的边缘信息输出&#xff0c;确保裁剪的准确性&#xff0c;减少浪费&#xff0c;并提高生产效率。 项目需求 将打满针眼的布匹边缘裁剪掉&#xff0c;且误差小…...

编程日记 2025/1/13 18:55:22

【学习笔记】理解深度学习的基础：机器学习

1. 机器学习基础 1.1 机器学习的定义与重要性 定义&#xff1a;深度学习是机器学习的一种特定形式。为了深入理解深度学习&#xff0c;必须牢固掌握机器学习的基本原理。机器学习算法是一种能够从数据中学习的算法&#xff0c;通过经验E在任务T上提高性能度量P&#xff08;Mi…...

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

提升租赁效率的租赁小程序全解析

内容概要 在如今快节奏的生活中&#xff0c;租赁小程序俨然成为了提升租赁效率的一把利器。无论是个人还是企业&#xff0c;都会因其便捷的功能而受益。简单来说&#xff0c;租赁小程序能让繁琐的租赁流程变得轻松、高效。在这里&#xff0c;我们将带您畅游租赁小程序的海洋&a…...

编程日记 2025/1/13 18:51:16

Windows自动化Python pyautogui RPA操作

依赖包 import time import pyautogui import pyperclip import os import psutil from pywinauto.application import Application睡眠&#xff1a; pyautogui.sleep(1)鼠标事件&#xff1a; pyautogui.moveTo(100, 100, duration0.25) pyautogui.click(100, 100, duration0.…...

编程日记 2025/1/13 18:47:12

蓝桥杯_B组_省赛_2022（用作博主自己学习）

题目链接算法11.九进制转十进制 - 蓝桥云课 进制转换 21.顺子日期 - 蓝桥云课 时间与日期 31.刷题统计 - 蓝桥云课 时间与日期 41.修剪灌木 - 蓝桥云课 思维 51.X 进制减法 - 蓝桥云课 贪心 61.统计子矩阵 - 蓝桥云课 二维前缀和 71.积木画 - 蓝桥云课 动态规划 82.扫雷 - 蓝桥…...

编程日记 2025/1/13 18:39:02

RK3568 Android 13 内置搜狗输入法小计

问&#xff1a;为什么写&#xff1f; 答&#xff1a;网上搜出来的都试过了&#xff0c;不行&#xff01;下面直接上代码和注意事项&#xff01; 首先到这个目录&#xff08;/RK3568/Rockchip_Android13_SDK_Release/device/rockchip/rk356x/tl3568_evm/preinstall&#xff09…...

编程日记 2025/1/13 18:33:54

单片机Day1

目录 一.什么是单片机&#xff1f; 二.单片机的组成 三.封装形式 四.优势 五.分类 通用型&#xff1a; 专用型&#xff1a; 按处理的二进制位可以分为&#xff1a; 六.应用&#xff1a; 七.发展趋势 1.增加CPU的数据总线宽度。 2.存储器的发展。 3.片内1/0的改进 …...

编程日记 2025/1/13 18:32:53

《机器学习》之贝叶斯（Bayes）算法

目录 一、前言 二、贝叶斯算法原理解析 1、贝叶斯公式 2、朴素贝叶斯算法 3、计算步骤 4、例题&#xff1a; &#xff08;1&#xff09;、 计算先验概率 &#xff08;2&#xff09;、计算条件概率 &#xff08;3&#xff09;、计算后验概率 &#xff08;4&#xff09;…...

编程日记 2025/1/13 18:29:51

怎么样做企业网站/windows优化大师是病毒吗

今天尝试了SharePoint2010网站的备份和还原&#xff0c;从网上搜一些文档看看&#xff0c;然后自己试试&#xff0c;感觉和2007的操作没什么太大的区别&#xff0c;跟大家分享下自己尝试的命令行方式和数据库的方式&#xff0c;2007自己常用的也是这两种方式。 1、 命令行的方式…...

编程日记 2025/2/6 5:19:45

域名到期与网站打不开/杭州seo网站推广

1. 使用Value注解读取 读取properties配置文件时&#xff0c;默认读取的是application.properties。 Value("${port}")private String port; 2、使用Environment读取 Autowiredprivate Environment environment;public void test(){String portenvironment.getProper…...

编程日记 2025/2/6 5:16:38

手机上安装wordpress/网站制作的流程是什么

目录 一、路由简介 1.1 vue-router 的理解 1.2 对SPA应用的理解 1.3 路由的理解 1.3.1 什么是路由 1.3.2 路由的分类 二、路由基本使用 2.1 安装vue-router 2.2 引用vue-router 2.3 编写router配置项 2.4 实现切换&#xff08;active-class可配置高亮样式&#xff0…...

编程日记 2025/2/5 22:14:09

c 可以做网站嘛/百度权重排名查询

Maven官网下载资源包下载完成后解压到非中文目录下配置环境变量 添加环境变量&#xff0c;上面的路径为解压后的路径&#xff0c;注意是bin目录的上一级路径 追加path变量 环境变量是否配置好&#xff0c;在安装路径下打开powershell窗口&#xff0c;通过mvn -v命令验证 在安装…...

编程日记 2025/2/5 21:38:59

威海微网站建设/清远seo

现在做项目都会使用框架,现在很常见的框架就是SSH(StrutsSpringMVCspringhibernate),SSM(Struts/springMVCSpringHibernate),而我最近做的项目itoo中,使用到框架为easyUISpringMVCEJBhibernate.做项目分层是为了更好的解耦,分层可以完全不用你框架就能够解决,为什么还不需要这么…...

编程日记 2025/2/5 19:52:12

汕尾商城网站建设/温州网站建设优化

在前一天的博文中我提到了“!”&#xff08;逻辑否&#xff09;的优先级低于“()”&#xff08;执行&#xff09;。 但是直到昨天为止&#xff0c;我都没法很清楚地确定其它运算符的优先级是怎么样的。 注意到这个问题以后&#xff0c;我花了点时间&#xff0c;参考一些文档&am…...

编程日记 2025/2/5 18:34:08