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

news/2025/2/13 4:02:23/

目录

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博客


http://www.ppmy.cn/news/1564426.html

相关文章

图论1-问题 C: 算法7-6:图的遍历——广度优先搜索

题目描述 广度优先搜索遍历类似于树的按层次遍历的过程。其过程为&#xff1a;假设从图中的某顶点v出发&#xff0c;在访问了v之后依次访问v的各个未曾被访问过的邻接点&#xff0c;然后分别从这些邻接点出发依次访问它们的邻接点&#xff0c;并使“先被访问的顶点的邻接点”先…

【Linux】线程与同步互斥相关知识详细梳理

目录 1. 线程概念 2. 线程优势 3. 线程劣势 4. 线程控制 4.1 POSIX线程库 4.2 线程操作 5. 线程互斥 5.1 互斥相关概念 5.2 互斥量mutex 5.3 互斥量实现原理 6. 线程同步 6.1 同步概念与竞态条件 6.2 条件变量 6.3 条件变量使用规范及细节 1. 线程概念 什么是…

Linux《Linux简介与环境的搭建》

在学习了C或者是C语言的基础知识之后就可以开始Linux的学习了&#xff0c;现在Linux无论是在服务器领域还是在桌面领域都被广泛的使用&#xff0c;所以Linxu也是我们学习编程的重要环节&#xff0c;在此接下来我们将会花大量的时间在Linxu的学习上。在学习Linux初期你可以会像初…

【设计模式-结构型】代理模式

一、什么是代理模式 在港片中&#xff0c;经常能看到一些酷炫的大哥被警察抓了&#xff0c;警察会试图从他们口中套出一些关键信息。但这些大哥们通常会非常冷静地回应&#xff1a;“我有权保持沉默&#xff0c;我要找我的律师。” 这个律师就像是大哥的“法律盾牌”&#xff…

iOS - 关联对象的实现

根据源码总结一下关联对象(Associated Objects)的实现&#xff1a; 1. 关联对象的基本结构 // 对象的 isa 结构中包含关联对象标记 union isa_t {struct {uintptr_t nonpointer : 1; // 是否使用优化的 isauintptr_t has_assoc : 1; // 是否有关联对象// ...其他位…

掌握 React 高阶组件与高阶函数:构建可复用组件的新境界

一、引言 在 React 开发中&#xff0c;代码复用性和逻辑分离是提高开发效率和维护性的重要手段。高阶组件&#xff08;Higher-Order Component, HOC&#xff09;和高阶函数&#xff08;Higher-Order Function, HOF&#xff09;是实现这一目标的两种强大工具。本文将详细介绍这…

隧道IP广播与紧急电话系统:提升隧道安全的关键技术

隧道IP广播与紧急电话系统&#xff1a;提升隧道安全的关键技术 随着现代城市交通的迅猛发展&#xff0c;隧道作为重要的交通基础设施&#xff0c;其安全性与应急处理能力显得尤为重要。隧道IP广播与紧急电话系统作为保障隧道安全的关键技术&#xff0c;正发挥着越来越重要的作…

HarmonyOS使用Grid网格实现计算器功能实现

使用Grid网格处理&#xff0c;实现了计算器的加减乘除功能 Entry Component struct GridPage {State str: string ""; //暂存区State num: string "0"; //输入区State flagNum: boolean false; //标识build() {Column() {Grid() {GridItem() {Text(this…