源代碼下載
https://github.com/comehope/front-end-daily-challenges
代碼解讀
定義dom，容器中包含文本，并且包含4個用于特效，的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);
}
增加動畫效果：
.rainbowspan::before,
.rainbowspan::after{
animation:animate0.8sinfinitealternate;
filter:opacity(0);
}
@keyframesanimate{
from{
filter:opacity(0);
}
to{
filter:opacity(1);
}
}
為圖層設置延時，增強動感：
.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);
}
最后，把原始文本設置為透明色：
.rainbow{
color:transparent;
}
大功告成！
本文轉載自中文網
