前端 CSS 经典：多行文本擦除效果_css 擦除效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_64684095/article/details/139281502

前言：使用动画实现更改变量 --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" />
    <meta
      name="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>