目录
[1. 效果展示](#1. 效果展示)
[2. 思路分析](#2. 思路分析)
[2.1 难点](#2.1 难点)
[2.2 实现思路](#2.2 实现思路)
[3. 代码实现](#3. 代码实现)
[3.1 html部分](#3.1 html部分)
[3.2 css部分](#3.2 css部分)
[3.3 完整代码](#3.3 完整代码)
[4. 总结](#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. 总结
以上就是打字机效果的实现过程，本文参考于 **渡一老师的大师课教程。**如果对你有所帮助的话，不妨点赞加收藏，后面还会带来更多有趣的前端动效，关注我，不迷路😀。
更多前端动效点击下方链接↓ ↓ ↓