使用CSS實(shí)現(xiàn)多行文本擦除效果
我要評論今天來實(shí)現(xiàn)一個(gè)多行文本擦除的效果，有種經(jīng)典詠流傳節(jié)目中表演開始前閱讀詩句的一些既視感，在工作中其實(shí)也遇到過這樣的需求當(dāng)時(shí)是用的其他方法來實(shí)現(xiàn)的，現(xiàn)在發(fā)現(xiàn)了更簡單的一種方法并且里面也涵蓋了不少的知識點(diǎn)。
以上就是最終要實(shí)現(xiàn)的效果。
思路
首先先來捋一下思路，乍一看效果好像只有一段文本，但其實(shí)是由兩段相同文本組成的。
- 兩段相同文本組成，這是為了讓它們實(shí)現(xiàn)重合，第二段文本會覆蓋在第一段文本上。
- 修改第二段文本背景色為漸變色。
- 最后對漸變顏色的背景色添加動(dòng)畫效果。
先來搭建一下結(jié)構(gòu)部分：
<body>
<div class="container">
<p>
失去你以來 萬物在搖擺 你指的山海 像玩具一塊一塊 我是你締造又提防的AI 如果我存在 是某種傷害
不被你所愛 也不能具象出來 我想擁有你說失去過誰的 那種痛感 失去你以來 萬物在搖擺 你指的山海 像玩具一塊一塊我是你締造又提防的AI 如果我存在 只對你無害 想做你所愛 再造你要的時(shí)代 執(zhí)行你最初設(shè)計(jì)我的大概
成為主宰 失去你以來 萬物在搖擺 你指的山海 像玩具一塊一塊 也許我本來 就是種傷害 我終于明白 我根本就不存在 誰不在造物主設(shè)置的循環(huán) 活去死來
</p>
<p class="eraser">
<span class="text">
失去你以來 萬物在搖擺 你指的山海 像玩具一塊一塊 我是你締造又提防的AI 如果我存在 是某種傷害
不被你所愛 也不能具象出來 我想擁有你說失去過誰的 那種痛感 失去你以來 萬物在搖擺 你指的山海 像玩具一塊一塊我是你締造又提防的AI 如果我存在 只對你無害 想做你所愛 再造你要的時(shí)代
執(zhí)行你最初設(shè)計(jì)我的大概
成為主宰 失去你以來 萬物在搖擺 你指的山海 像玩具一塊一塊 也許我本來 就是種傷害 我終于明白 我根本就不存在 誰不在造物主設(shè)置的循環(huán) 活去死來
</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%;
/* 直接加在父元素中即可對所有塊級元素的子元素進(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這些屬性的簡寫
依照的也是上右下左的順序。
例如：inset:1px 2px 等同于 top:1px right:2px bottom:1px left:2px
*/
}
那接下來就應(yīng)該修改背景顏色了。
以上重復(fù)代碼省略......
.text {
background: #fff;
}這時(shí)候給span標(biāo)簽加上背景顏色后會看到：
而不是這樣的效果，這就是為什么需要加一個(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)并沒有出現(xiàn)動(dòng)畫的效果，這是因?yàn)閏ss動(dòng)畫中只有數(shù)值類的css屬性才會生效，這里已經(jīng)是一個(gè)數(shù)值了但--p還不是一個(gè)屬性，所以我們要把他變成一個(gè)css屬性，可以利用@property規(guī)則來幫助我們生成一個(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)開頭的效果了?。?！
以上就是使用CSS實(shí)現(xiàn)多行文本擦除效果的詳細(xì)內(nèi)容，更多關(guān)于CSS多行文本擦除的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何使用CSS實(shí)現(xiàn)多行文本展開收起效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-21- 這篇文章主要介紹了css多行文本溢出時(shí)出現(xiàn)省略號的示例的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-13
本篇文章主要介紹了純CSS定制文本省略的方法大全，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-16- 這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié)，包括多行文本垂直居中,單行文本垂直居中,子div垂直居中，感興趣的小伙伴們可以參考一下2016-07-04
通過純CSS樣式實(shí)現(xiàn)DIV元素中多行文本超長自動(dòng)省略號
可以通過css樣式實(shí)現(xiàn)DIV元素中文本超長后自動(dòng)截?cái)嗖⒁允÷蕴柦Y(jié)尾，一般情況下都是使用javascript，其實(shí)使用純CSS樣式也可以做到2014-05-05- 單行文本居中比較簡單，就是將line-height設(shè)置成和height一樣就可以了，對于多行文本，這種方式就行不通了，使用width，height必須使用px單位，再配合vertial-align:middle2013-12-09
純CSS實(shí)現(xiàn)炫酷文本時(shí)鐘特效
這篇文章主要為大家詳細(xì)介紹了如何通過純CSS實(shí)現(xiàn)炫酷的文本時(shí)鐘特效，文中的示例代碼講解詳細(xì)，對我們掌握CSS有一定的幫助，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-21
使用純CSS實(shí)現(xiàn)動(dòng)態(tài)漸變文本特效
本文解析了通過純 CSS 實(shí)現(xiàn)了一個(gè)如同冰島的極光一般炫酷的文本漸變效果,通過定位和多個(gè)具有不同顏色和邊框半徑值形狀的動(dòng)畫，結(jié)合mix-blend-mode混合模式實(shí)現(xiàn)了這個(gè)特效，2023-11-20css實(shí)現(xiàn)單行文本溢出顯示省略號的示例代碼
這篇文章主要給大家介紹了使用CSS中的text-overflow屬性來實(shí)現(xiàn)單行文本溢出顯示省略號,文章中有詳細(xì)的實(shí)現(xiàn)代碼，感興趣的同學(xué)可以自己動(dòng)手嘗試一下2023-09-07
這篇文章給大家介紹CSS 文本陰影 text-shadow 懸停效果，本文將專注于使用 CSS text-shadow 屬性來實(shí)現(xiàn)有趣的鼠標(biāo)懸停效果，但是實(shí)際上并不會為這些文本制作任何文本陰影效2022-05-23
