小編給大家分享一下怎么使用純CSS實(shí)現(xiàn)彩虹條紋文字的效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括景泰網(wǎng)站建設(shè)、景泰網(wǎng)站制作、景泰網(wǎng)頁制作以及景泰網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，景泰網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到景泰省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

代碼解讀

定義dom，容器中包含文本，并且包含4個(gè)用于特效，的data-text屬性值為與文本相同：

web

居中顯示：

html,body{

height:100%;

display:flex;

align-items:center;

justify-content:center;

background:black;

}

定義文本樣式：

.rainbow{

color:white;

font-size:300px;

text-transform:uppercase;

font-family:sans-serif;

font-weight:bold;

line-height:1em;

position:relative;

}

用偽元素增加圖層，形成彩虹效果：

.rainbowspan::before,

.rainbowspan::after{

content:attr(data-text);

position:absolute;

top:0;

left:0;

overflow:hidden;

}

.rainbowspan:nth-child(1)::before{

color:orchid;

z-index:1;

height:calc(100%-10%*1);

}

.rainbowspan:nth-child(1)::after{

color:mediumpurple;

z-index:2;

height:calc(100%-10%*2);

}

.rainbowspan:nth-child(2)::before{

color:deepskyblue;

z-index:3;

height:calc(100%-10%*3);

}

.rainbowspan:nth-child(2)::after{

color:cyan;

z-index:4;

height:calc(100%-10%*4);

}

.rainbowspan:nth-child(3)::before{

color:mediumspringgreen;

z-index:5;

height:calc(100%-10%*5);

}

.rainbowspan:nth-child(3)::after{

color:yellow;

z-index:6;

height:calc(100%-10%*6);

}

.rainbowspan:nth-child(4)::before{

color:gold;

z-index:7;

height:calc(100%-10%*7);

}

.rainbowspan:nth-child(4)::after{

color:tomato;

z-index:8;

height:calc(100%-10%*8);

}

增加動(dòng)畫效果：

.rainbowspan::before,

.rainbowspan::after{

animation:animate0.8sinfinitealternate;

filter:opacity(0);

}

@keyframesanimate{

from{

filter:opacity(0);

}

to{

filter:opacity(1);

}

}

為圖層設(shè)置延時(shí)，增強(qiáng)動(dòng)感：

.rainbowspan:nth-child(1)::before{

animation-delay:calc(0.8s-0.1s*1);

}

.rainbowspan:nth-child(1)::after{

animation-delay:calc(0.8s-0.1s*2);

}

.rainbowspan:nth-child(2)::before{

animation-delay:calc(0.8s-0.1s*3);

}

.rainbowspan:nth-child(2)::after{

animation-delay:calc(0.8s-0.1s*4);

}

.rainbowspan:nth-child(3)::before{

animation-delay:calc(0.8s-0.1s*5);

}

.rainbowspan:nth-child(3)::after{

animation-delay:calc(0.8s-0.1s*6);

}

.rainbowspan:nth-child(4)::before{

animation-delay:calc(0.8s-0.1s*7);

}

.rainbowspan:nth-child(4)::after{

animation-delay:calc(0.8s-0.1s*8);

}

最后，把原始文本設(shè)置為透明色：

.rainbow{

color:transparent;

}

看完了這篇文章，相信你對(duì)“怎么使用純CSS實(shí)現(xiàn)彩虹條紋文字的效果”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！