多行文本擦除动画效果，打字机显示效果

html部分代码：

<div class="text-content">
   <p>
    由村庄与开发公司共同组建平台开发公司，负责统一规划、建设、招商、推广和运营。平台开发公司进行必要的交通、餐饮、住宿、游客服务中心等基础设施与公共服务建设，按照规划要求进行有目的性招商。招商有经验、有特色的主题农场运营主体一起合作开发。通过统一营销运作，树立品牌，带动项目人气，再以此基础完善产业体系加强乡村人居环境建设，进而再提升乡村旅游品质，形成良性循环，高效发展。由村庄与开发公司共同组建平台开发公司，负责统一规划建设、招商、推广和运营。平台开发公司进行必要的交通、餐饮、宿游客服务中心等基础设施与公共服务建设，按照规划要求进行有目的性招商。招商有经验、有特色的主题农场运营主体一起合作开发。通过统一营销运作，树立品牌，带动项目人气。再以此基础完善产业体系，加强乡村人居环境建设.
   </p>
   <p class="eraser">
      <span class="text">
    由村庄与开发公司共同组建平台开发公司，负责统一规划、建设、招商、推广和运营。平台开发公司进行必要的交通、餐饮、住宿、游客服务中心等基础设施与公共服务建设，按照规划要求进行有目的性招商。招商有经验、有特色的主题农场运营主体一起合作开发。通过统一营销运作，树立品牌，带动项目人气，再以此基础完善产业体系加强乡村人居环境建设，进而再提升乡村旅游品质，形成良性循环，高效发展。由村庄与开发公司共同组建平台开发公司，负责统一规划建设、招商、推广和运营。平台开发公司进行必要的交通、餐饮、宿游客服务中心等基础设施与公共服务建设，按照规划要求进行有目的性招商。招商有经验、有特色的主题农场运营主体一起合作开发。通过统一营销运作，树立品牌，带动项目人气。再以此基础完善产业体系，加强乡村人居环境建设.
      </span>
   </p>
</div>

css部分代码：

 .text-content {
        width: 100%;
        min-height: 150px;
        position: relative;
        overflow-y: auto;
        &::-webkit-scrollbar {
          width: 10px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color: #66c589;
        }
        &::-webkit-scrollbar-track {
          background: #d8d8d8; /* 设置滚动条背景颜色 */
          border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb:hover {
          background: #34bf7e; /* 设置滚动条滑块在鼠标悬停时的颜色 */
        }
        p {
          font-size: 16px;
          color: #3d3d3d;
          line-height: 1.5;
          text-indent: 2em;
        }
        .eraser {
          position: absolute;
          inset: 0;
        }
        /*自定义属性--p*/
        @property --p {
          syntax: "<percentage>"; /*自定义属性语法规则为百分比*/
          initial-value: 0%; /*自定义属性初始值0%*/
          inherits: false; /*自定义属性是否能被继承*/
        }
        .text {
          --p: 0%; /*变量*/
          background: linear-gradient(
            to right,
            transparent var(--p),
            #dff4eb calc(var(--p) + 30px)
          );
          color: transparent;
          animation: erase 5s linear forwards;
        }

        @keyframes erase {
          to {
            --p: 100%;
          }
        }
      }