使用CSS實(shí)現(xiàn)多行文本擦除效果

https://juejin.cn/ 發(fā)布時(shí)間：2024-02-18 14:03:42 作者：孤獨(dú)的根號(hào)_

今天來(lái)實(shí)現(xiàn)一個(gè)多行文本擦除的效果，有種經(jīng)典詠流傳節(jié)目中表演開(kāi)始前閱讀詩(shī)句的一些既視感，在工作中其實(shí)也遇到過(guò)這樣的需求當(dāng)時(shí)是用的其他方法來(lái)實(shí)現(xiàn)的，需要的朋友可以參考下

以上就是最終要實(shí)現(xiàn)的效果。

思路

首先先來(lái)捋一下思路，乍一看效果好像只有一段文本，但其實(shí)是由兩段相同文本組成的。

兩段相同文本組成，這是為了讓它們實(shí)現(xiàn)重合，第二段文本會(huì)覆蓋在第一段文本上。
修改第二段文本背景色為漸變色。
最后對(duì)漸變顏色的背景色添加動(dòng)畫效果。

先來(lái)搭建一下結(jié)構(gòu)部分：

<body>
    <div class="container">
        <p>
            失去你以來(lái) 萬(wàn)物在搖擺 你指的山海 像玩具一塊一塊 我是你締造又提防的AI 如果我存在 是某種傷害
            不被你所愛(ài) 也不能具象出來(lái) 我想擁有你說(shuō)失去過(guò)誰(shuí)的 那種痛感 失去你以來(lái) 萬(wàn)物在搖擺 你指的山海 像玩具一塊一塊我是你締造又提防的AI 如果我存在 只對(duì)你無(wú)害 想做你所愛(ài) 再造你要的時(shí)代 執(zhí)行你最初設(shè)計(jì)我的大概
            成為主宰 失去你以來(lái) 萬(wàn)物在搖擺 你指的山海 像玩具一塊一塊 也許我本來(lái) 就是種傷害 我終于明白 我根本就不存在 誰(shuí)不在造物主設(shè)置的循環(huán) 活去死來(lái)
        </p>
        <p class="eraser">
            <span class="text">
                失去你以來(lái) 萬(wàn)物在搖擺 你指的山海 像玩具一塊一塊 我是你締造又提防的AI 如果我存在 是某種傷害
                不被你所愛(ài) 也不能具象出來(lái) 我想擁有你說(shuō)失去過(guò)誰(shuí)的 那種痛感 失去你以來(lái) 萬(wàn)物在搖擺 你指的山海 像玩具一塊一塊我是你締造又提防的AI 如果我存在 只對(duì)你無(wú)害 想做你所愛(ài) 再造你要的時(shí)代
                執(zhí)行你最初設(shè)計(jì)我的大概
                成為主宰 失去你以來(lái) 萬(wàn)物在搖擺 你指的山海 像玩具一塊一塊 也許我本來(lái) 就是種傷害 我終于明白 我根本就不存在 誰(shuí)不在造物主設(shè)置的循環(huán) 活去死來(lái)
            </span>
        </p>
    </div>
</body>

代碼中兩段文本都是由p標(biāo)簽包裹，第二段中加入了一個(gè)span標(biāo)簽是因?yàn)楹竺嫘薷谋尘吧臅r(shí)候凸顯出行的效果，這個(gè)下面加上樣式后就看到了。

添加樣式：

* {
    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;
}

現(xiàn)在只需要給第二段增加一個(gè)定位效果即可實(shí)現(xiàn)文本的覆蓋：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #000;
    color: #fff;
}
.container {
    width: 60%;
    /* 直接加在父元素中即可對(duì)所有塊級(jí)元素的子元素進(jìn)行首行縮進(jìn) */
    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這些屬性的簡(jiǎn)寫
        依照的也是上右下左的順序。
        例如：inset:1px 2px 等同于 top:1px right:2px bottom:1px left:2px
    */
}

那接下來(lái)就應(yīng)該修改背景顏色了。

以上重復(fù)代碼省略......
.text {
    background: #fff;
}

這時(shí)候給span標(biāo)簽加上背景顏色后會(huì)看到：

而不是這樣的效果，這就是為什么需要加一個(gè)span標(biāo)簽的原因了。

以上重復(fù)代碼省略......
.text {
    background: linear-gradient(to right, #0000 10%, #000 10%);
    color:transparent;
}

下面要調(diào)整的就是將漸變里面的百分比變?yōu)閯?dòng)態(tài)的，我們可以聲明一個(gè)變量：

以上重復(fù)代碼省略......
.text {
    --p:0%;
    background: linear-gradient(to right, #0000 var(--p), #000 calc( var(--p) + 30px)); // 加上30px顯示一個(gè)默認(rèn)的漸變區(qū)域
    color:transparent;
}

下面就該加上動(dòng)畫效果了，在設(shè)置動(dòng)畫時(shí)改變--p變量的值為100%

以上重復(fù)代碼省略......
.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%;
    }
}

但是這樣寫完之后發(fā)現(xiàn)并沒(méi)有出現(xiàn)動(dòng)畫的效果，這是因?yàn)閏ss動(dòng)畫中只有數(shù)值類的css屬性才會(huì)生效，這里已經(jīng)是一個(gè)數(shù)值了但--p還不是一個(gè)屬性，所以我們要把他變成一個(gè)css屬性，可以利用@property規(guī)則來(lái)幫助我們生成一個(gè)-xxx的自定義，它的結(jié)構(gòu)：

@property 屬性名稱 {
    syntax: '<類型>'; // 必須
    initial-value: 默認(rèn)值; // 必須
    inherits: false;  // 是否可繼承 非必須
}

以上重復(fù)代碼省略......
.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%;
    }
}

到此為止也就實(shí)現(xiàn)開(kāi)頭的效果了！?。?/p>

以上就是使用CSS實(shí)現(xiàn)多行文本擦除效果的詳細(xì)內(nèi)容，更多關(guān)于CSS多行文本擦除的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！