【前端】多行文本擦除效果

最新推荐文章于 2024-08-09 10:42:44 发布

yellow代码人

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量71

点赞数 3

分类专栏：动画文章标签：前端

本文链接：https://blog.csdn.net/weixin_52902052/article/details/140180469

版权

动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多行文本擦除</title>
</head>
<style>
  body {
    background-color: #000;
  }

  .container {
    width: 80%;
    margin: 1em auto;
    font-family: 'Courier New', Courier, monospace;
    line-height: 2;
    text-indent: 2em;
    position: relative;
    color: #fff;
  }

  p {
    margin: 0px;
  }

  .eraser {
    position: absolute;
    inset: 0;
  }

  @property --p {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
  }

  .text {
    --p: 10%;
    background: linear-gradient(to right, transparent var(--p), #000 calc(var(--p) + 30px));
    color: transparent;
    animation: eraser 10s linear forwards;
  }

  @keyframes eraser {
    to {
      --p: 100%;
    }
  }
</style>

<body>
  <div class="container">
    <p> The incident happened like this: On the evening of June 30, Jiaobao came to the square to dance as usual, and
      there were many people watching and filming. Suddenly, a bald man stepped out of the crowd and attacked him with a
      knife without warning. At first, he thought the other side was joking and did not run away immediately, and the
      onlookers did not realize the seriousness of the situation. It was not until he was stabbed and fell to the ground
      that people at the scene realized a tragedy had occurred. According to witnesses, the bald man was very ruthless
      during the attack, stabbing the bag brother continuously until the other side fell to the ground.
    </p>
    <p class="eraser">
      <span class="text">
        The incident happened like this: On the evening of June 30, Jiaobao came to the square to dance as usual, and
        there were many people watching and filming. Suddenly, a bald man stepped out of the crowd and attacked him with
        a
        knife without warning. At first, he thought the other side was joking and did not run away immediately, and the
        onlookers did not realize the seriousness of the situation. It was not until he was stabbed and fell to the
        ground
        that people at the scene realized a tragedy had occurred. According to witnesses, the bald man was very ruthless
        during the attack, stabbing the bag brother continuously until the other side fell to the ground.
      </span>
    </p>
  </div>
</body>

</html>