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