实现思路
实现这样的效果，需要用一段同样的文字盖上去，而且盖上去的文字部分需要用一个行盒标签包裹。因为盖上去的这段文本并不需要被看见，只需要用文本把行盒撑开（以达到把原来的文本1:1覆盖的效果）。然后通过动画的效果逐渐将行盒的背景由透明变为不透明，就能实现擦除效果了。
完整代码
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: #000;
}
p {
margin: 0;
/* 实现文字渐变色 */
background-image: -webkit-linear-gradient(top, #eca0a0, rgb(238, 127, 136), #f40);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.container {
position: relative;
width: 80%;
margin: 1em auto;
line-height: 2;
text-indent: 2em;
color: #fff;
}
.eraser {
position: absolute;
inset: 0;
}
.text {
--p: 0%;
background: linear-gradient(to right, #0000 var(--p), #000 calc(var(--p) + 10px));
color: transparent; /* 多出来的行盒内容并不需要，只是需要文字把行盒撑开，所以这里需要设置透明*/
animation: erase 10s linear forwards;
}
@property --p {
syntax: '<percentage>';
initial-value: 0%;
inherits: false;
}
@keyframes erase {
to {
--p: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<p>
在《小王子》中，作者安排由在西方文化中象征着智慧的狐狸说出这番哲理：“对我来说，你无非是个孩子，和其他成千上万个孩子没有什么区别。我不需要你，你也不需要我。对你来说，我无非是只狐狸，和其他成千上万只狐狸没有什么不同。但如果你驯化了我，那我们就会彼此需要。你对我来说是独一无二的，我对你来说也是独一无二的……”
</p>
<p class="eraser">
<span class="text">
在《小王子》中，作者安排由在西方文化中象征着智慧的狐狸说出这番哲理：“对我来说，你无非是个孩子，和其他成千上万个孩子没有什么区别。我不需要你，你也不需要我。对你来说，我无非是只狐狸，和其他成千上万只狐狸没有什么不同。但如果你驯化了我，那我们就会彼此需要。你对我来说是独一无二的，我对你来说也是独一无二的……”
</span>
</p>
</div>
</body>
</html>
