This article brings the content is about how to use pure CSS to achieve the effect of rainbow stripe text (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.
Effect Preview
Source code Download
Https://github.com/comehope/front-end-daily-challenges
Code interpretation
Defines the DOM, contains text in the container, and contains 4 <span> Data-text attribute values for the effects,<span> are the same as the text:
<p class= "Rainbow" > Web <span data-text= "web" ></span> <span data-text= "Web" > </span> <span data-text= "web" ></span> <span data-text= "Web" ></span></p >
Center display:
HTML, body { height:100%; Display:flex; Align-items:center; Justify-content:center; Background:black;}
Define Text styles:
. Rainbow { color:white; font-size:300px; Text-transform:uppercase; Font-family:sans-serif; Font-weight:bold; Line-height:1em; Position:relative;}
Add layers with pseudo-elements to create a rainbow effect:
. Rainbow Span::before,.rainbow Span::after {content:attr (data-text); Position:absolute; top:0; left:0; Overflow:hidden;}. Rainbow Span:nth-child (1):: Before {color:orchid; Z-index:1; Height:calc (100%-10% * 1);}. Rainbow Span:nth-child (1):: after {color:mediumpurple; Z-index:2; Height:calc (100%-10% * 2);}. Rainbow Span:nth-child (2):: Before {color:deepskyblue; Z-index:3; Height:calc (100%-10% * 3);}. Rainbow Span:nth-child (2):: after {Color:cyan; Z-index:4; Height:calc (100%-10% * 4);}. Rainbow Span:nth-child (3):: Before {color:mediumspringgreen; Z-index:5; Height:calc (100%-10% * 5);}. Rainbow Span:nth-child (3):: after {color:yellow; Z-index:6; Height:calc (100%-10% * 6);}. Rainbow Span:nth-child (4):: Before {color:gold; Z-index:7; Height:calc (100%-10% * 7);}. Rainbow Span:nth-child (4):: after {color:tomato; Z-index:8; Height:calc (100%-10% * 8);}
Add animation effects:
. Rainbow Span::before,.rainbow Span::after { animation:animate 0.8s infinite Alternate; Filter:opacity (0);} @keyframes Animate {from { filter:opacity (0); } to { filter:opacity (1); }}
Set the delay for the layer to enhance the motion:
. Rainbow Span:nth-child (1):: Before { Animation-delay:calc (0.8s-0.1s * 1);}. Rainbow Span:nth-child (1):: After { Animation-delay:calc (0.8s-0.1s * 2);}. Rainbow Span:nth-child (2):: Before { Animation-delay:calc (0.8s-0.1s * 3);}. Rainbow Span:nth-child (2):: After { animation-delay:calc (0.8s-0.1s * 4);}. Rainbow Span:nth-child (3):: Before { Animation-delay:calc (0.8s-0.1s * 5);}. Rainbow Span:nth-child (3):: After { Animation-delay:calc (0.8s-0.1s * 6);}. Rainbow Span:nth-child (4):: Before { Animation-delay:calc (0.8s-0.1s * 7);}. Rainbow Span:nth-child (4):: After { Animation-delay:calc (0.8s-0.1s * 8);}
Finally, set the original text to a transparent color:
. Rainbow { color:transparent;}
Done!