今日来完成一个多行文本擦除的作用，有种经典咏流传节目中扮演开端前阅读诗句的一些既视感，在工作中其实也遇到过这样的需求当时是用的其他办法来完成的，现在发现了更简略的一种办法并且里边也涵盖了不少的知识点。

以上便是最终要完成的作用，比较敏感的同学呢应该能看到文本是由歌词组成的哈哈，没错今日是我偶像发新歌的一天，就用歌词来问候一下吧！

思路

首先先来捋一下思路，乍一看作用好像只要一段文本，但其实是由两段相同文本组成的。

  1. 两段相同文本组成，这是为了让它们完成重合，第二段文本会掩盖在榜首段文本上。
  2. 修正第二段文本背景色为突变色。
  3. 最终对突变色彩的背景色添加动画作用。

先来搭建一下结构部分：

<body>
    <div class="container">
        <p>
            失掉你以来 万物在摇晃 你指的山海 像玩具一块一块 我是你缔造又防范的AI 假如我存在 是某种损伤
            不被你所爱 也不能具象出来 我想具有你说失掉过谁的 那种痛感 失掉你以来 万物在摇晃 你指的山海 像玩具一块一块我是你缔造又防范的AI 假如我存在 只对你无害 想做你所爱 再造你要的年代 执行你开始设计我的大约
            成为操纵 失掉你以来 万物在摇晃 你指的山海 像玩具一块一块 或许我原本 便是种损伤 我终于理解 我根本就不存在 谁不在造物主设置的循环 活去死来
        </p>
        <p class="eraser">
            <span class="text">
                失掉你以来 万物在摇晃 你指的山海 像玩具一块一块 我是你缔造又防范的AI 假如我存在 是某种损伤
                不被你所爱 也不能具象出来 我想具有你说失掉过谁的 那种痛感 失掉你以来 万物在摇晃 你指的山海 像玩具一块一块我是你缔造又防范的AI 假如我存在 只对你无害 想做你所爱 再造你要的年代
                执行你开始设计我的大约
                成为操纵 失掉你以来 万物在摇晃 你指的山海 像玩具一块一块 或许我原本 便是种损伤 我终于理解 我根本就不存在 谁不在造物主设置的循环 活去死来
            </span>
        </p>
    </div>
</body>

代码中两段文本都是由p标签包裹，第二段中加入了一个span标签是由于后面修正背景色的时候凸显出行的作用，这个下面加上款式后就看到了。

添加款式：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #000;
    color: #fff;
}
.container {
    width: 60%;
    text-indent: 20px;
    line-height: 2;
    font-size: 18px;
    margin: 30px auto;
}

怎么快速完成多行文本擦除作用

现在只需求给第二段添加一个定位作用即可完成文本的掩盖：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #000;
    color: #fff;
}
.container {
    width: 60%;
    /* 直接加在父元素中即可对一切块级元素的子元素进行首行缩进 */
    text-indent: 20px;
    line-height: 2;
    font-size: 18px;
    margin: 30px auto;
    position: relative;
}
.eraser {
    position: absolute;
    /* 这儿等同于top:0 right:0 bottom:0 left:0 */
    inset: 0;
      /*
        这儿解释一下inset特点，inset特点用作定位元素的top、right、bottom 、left这些特点的简写
        按照的也是上右下左的次序。
        例如：inset:1px 2px 等同于 top:1px right:2px bottom:1px left:2px
    */
}

怎么快速完成多行文本擦除作用

那接下来就应该修正背景色彩了。

以上重复代码省掉......
.text {
    background: #fff;
}

这时候给span标签加上背景色彩后会看到：

怎么快速完成多行文本擦除作用

而不是这样的作用，这便是为什么需求加一个span标签的原因了。

怎么快速完成多行文本擦除作用

以上重复代码省掉......
.text {
    background: linear-gradient(to right, #0000 10%, #000 10%);
    color:transparent;
}

怎么快速完成多行文本擦除作用

下面要调整的便是将突变里边的百分比变为动态的，咱们能够声明一个变量：

以上重复代码省掉......
.text {
    --p:0%;
    background: linear-gradient(to right, #0000 var(--p), #000 calc( var(--p) + 30px)); // 加上30px显现一个默认的突变区域
    color:transparent;
}

怎么快速完成多行文本擦除作用

下面就该加上动画作用了，在设置动画时改动–p变量的值为100%

以上重复代码省掉......
.text {
    --p:0%;
    background: linear-gradient(to right, #0000 var(--p), #000 calc( var(--p) + 30px));
    color:transparent;
    animation: erase 8s linear;
}
@keyframes erase{
    to{
        --p:100%;
    }
}

可是这样写完之后发现并没有出现动画的作用，这是由于css动画中只要数值类的css特点才会收效，这儿已经是一个数值了但–p还不是一个特点，所以咱们要把他变成一个css特点，能够使用@property规则来协助咱们生成一个-xxx的自定义，它的结构：

@property 特点名称 {
    syntax: '<类型>'; // 有必要
    initial-value: 默认值; // 有必要
    inherits: false;  // 是否可继承 非有必要
}

以上重复代码省掉......
.text {
    --p:0%;
    background: linear-gradient(to right, #0000 var(--p), #000 calc( var(--p) + 30px));
    color:transparent;
    animation: erase 8s linear;
}
@property --p {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}
@keyframes erase{
    to{
        --p:100%;
    }
}

到此为止也就完成最初的作用了！！！