登录实现一个文字擦除效果
前言
动画实际上就是一个视觉欺骗功能，一个前端如果不会视觉欺骗，那么针对很多效果将会手无足措，实际上学习动画的过程中，也能更好理解视觉欺骗，实际开发一些场景也会有更多实现方案
这里的擦除效果，就是利用视觉欺诈实现一个文字擦除效果(前面写到的进度条也有视觉欺骗在里面)
核心原理，就是在文本上方放置同样的一个文本内容，设置颜色将其盖住，通过css属性动画逐步放开遮挡区间，这样看起来就像是文本逐渐展示了(实现是不是和看起来效果有点不太一样，这就是视觉欺骗了)
实现
import "./App.css";
//基础文本
const text = `
“再也不能骂人了！”近日，一条以“骂人也违法了
最高可判三年”为关键词的话题登上热搜，迅速引发公众热议。这背后，是自2026年1月1日起正式施行的新修订《治安管理处罚法》，言语威胁、辱骂他人可能构成违法！公然辱骂他人或捏造事实，造成重伤或死亡的还涉嫌犯罪。请谨言慎行，莫因“口无遮拦”承担法律责任。
法律依据 《中华人民共和国治安管理处罚法》（2026），第五十条规定：
有下列行为之一的，处五日以下拘留或者一千元以下罚款；情节较重的，处五日以上十日以下拘留，可以并处一千元以下罚款：
（一）写恐吓信或者以其他方法威胁他人人身安全的；
（二）公然侮辱他人或者捏造事实诽谤他人的；
（三）捏造事实诬告陷害他人，企图使他人受到刑事追究或受到治安管理处罚的；
（四）对证人及其近亲属进行威胁、侮辱、殴打或者打击报复的；
（五）多次发送淫秽、侮辱、恐吓等信息或者采取滋扰、纠缠、跟踪等方法，干扰他人正常生活的；
（六）偷窥、偷拍、窃听、散布他人隐私的。
有前款第五项规定的滋扰、纠缠、跟踪行为的，除依照前款规定给予处罚外，经公安机关负责人批准，可以责令其一定期限内禁止接触被侵害人。对违反禁止接触规定的，处五日以上十日以下拘留，可以并处一千元以下罚款。
《中华人民共和国刑法》第二百四十六条：
以暴力或者其他方法公然侮辱他人或者捏造事实诽谤他人，情节严重的，处三年以下有期徒刑、拘役、管制或者剥夺政治权利。
`;
function App() {
return (
//使用两个一摸一样的文本效果，这样更好盖住
//为了能重合使用绝对定位来处理
<p className="App">
<p className="box">
{text}
</p>
<p className="box">
//不适用匿名盒子，是为了更好操作该行盒
<span className="earser">{text}</span>
</p>
</p>
);
}
css实现，除了使用行盒子实现背景的逐行变化，这里借助css自定义属性，来实现动画(毕竟动画只能应用css内置属性，不能直接应用变量)
ps：当然使用 background-position属性，就不用自定义属性了，容我装一下哈😄
.App {
margin: 0;
color: black;
position: relative;
display: block;
color: #000;
}
.box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
@property --per {
syntax: '<percentage>';
inherits: false;
initial-value: 5%;
}
//使用行盒子设置背景，才能达到我们想要的效果
.earser {
--per: 5%;
color: transparent;
background: linear-gradient(to right, transparent var(--per), #fff calc(var(--per) + 100px));
animation
: earser 5s linear forwards;
}
//关键帧动画
@keyframes earser {
to {
--per: 100%;
}
}
这是一个简易的部分擦除效果(gif懒得生成)
最后
思考一下，如果文本区域存在一个背景图的话，那么这种遮盖方式可能就不行了，这种情况怎么实现文字擦除效果么，不妨思考一下
