怎么使用純CSS實現彩虹條紋文字的效果

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

　　代碼解讀

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

　　<pclass="rainbow">

　　web

　　<spandata-text="web"></span>

　　<spandata-text="web"></span>

　　<spandata-text="web"></span>

　　<spandata-text="web"></span>

　　</p>

　　居中顯示：

　　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;

　　}

看完了這篇文章，相信你對“怎么使用純CSS實現彩虹條紋文字的效果”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！