前言：使用动画实现更改变量 --p，实现多行文本擦除效果，css 动画逻辑，什么样的动画是生效的，一定是一个数值类的 CSS 属性。--p 只是个变量，不是 CSS 属性，通过 Houdini API 使它变成一个属性。
效果图：
代码实现：
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;text-align: justify;}body {background: #000;color: #fff;}.contain {width: 80%;margin: 1em auto;line-height: 2;text-indent: 2em;position: relative;}.eraser {position: absolute;inset: 0;}.text {background: linear-gradient(to right,#0000 var(--p),#000 calc(var(--p) + 30px));color: transparent;animation: erase 5s linear forwards;}@property --p {syntax: "<percentage>";initial-value: 0%;inherits: false;}@keyframes erase {to {--p: 100%;}}</style></head><body><div><div class="contain"><p>台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！</p><p class="eraser"><span class="text">台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！台湾省是中国的！是中国不可获取的一部分，任何台独势力，我们都绝不姑息！解放军万岁！收复台湾指日可待！</span></p></div></div><script></script></body>
</html>