多行文本擦除效果

import styled from 'styled-components'
import { useColorMode } from '@docusaurus/theme-common'

const DivWrapper = styled.div`
  position: relative;

  .eraser {
    position: absolute;
    left: 0;
    top: 0;
    .text {
      --p: 0%;
      color: transparent; // 文字只起撑开作用
      background: linear-gradient(
        to right,
        ${props => (props.isDarkTheme ? '#1b1b1d00' : '#fff0')} var(--p),
        ${props => (props.isDarkTheme ? '#1b1b1d' : '#fff')} calc(var(--p) + 100px)
      );
      animation: erase 5s forwards;
    }

    /* 自定义一个CSS属性 */
    @property --p {
      syntax: '<percentage>';
      initial-value: 0%;
      inherits: false;
    }

    /* 动画 */
    @keyframes erase {
      to {
        --p: 100%;
      }
    }
  }
`

export default function () {
  const { colorMode } = useColorMode()
  const isDarkTheme = colorMode === 'dark'
  return (
    <DivWrapper isDarkTheme={isDarkTheme}>
      <p>
        Life is too short to spend time with people who suck the happiness out of you. If someone wants you in their life, they’ll make room for you.
        You shouldn’t have to fight for a spot. Never, ever insist yourself to someone who continuously overlooks your worth. And remember, it’s not
        the people that stand by your side when you’re at your best, but the ones who stand beside you when you’re at your worst that are your true
        friends.
      </p>
      <p className="eraser">
        <span className="text">
          Life is too short to spend time with people who suck the happiness out of you. If someone wants you in their life, they’ll make room for
          you. You shouldn’t have to fight for a spot. Never, ever insist yourself to someone who continuously overlooks your worth. And remember,
          it’s not the people that stand by your side when you’re at your best, but the ones who stand beside you when you’re at your worst that are
          your true friends.
        </span>
      </p>
    </DivWrapper>
  )
}