How to use pure CSS to realize the effect of rainbow stripe text
Editor to share with you how to use pure CSS to achieve the effect of rainbow stripe text, I hope you will gain something after reading this article, let's discuss it together!
Code interpretation
Define dom, the container contains text and contains 4 for special effects, and the data-text attribute value is the same as the text:
Web
Centered display:
Html,body {
Height:100%
Display:flex
Align-items:center
Justify-content:center
Background:black
}
Define the text style:
.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:
.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% Muay 10% No.1)
}
.rainbowspan:nth-child (1):: after {
Color:mediumpurple
Z-index:2
Height:calc (100% Muay 10% copyright 2)
}
.rainbowspan:nth-child (2):: before {
Color:deepskyblue
Z-index:3
Height:calc (100% Muay 10% Q3)
}
.rainbowspan:nth-child (2):: after {
Color:cyan
Z-index:4
Height:calc (100% Muay 10% Q4)
}
.rainbowspan:nth-child (3):: before {
Color:mediumspringgreen
Z-index:5
Height:calc (100% Muay 10% height:calc 5)
}
.rainbowspan:nth-child (3):: after {
Color:yellow
Z-index:6
Height:calc (100% MUE 10% MU6)
}
.rainbowspan:nth-child (4):: before {
Color:gold
Z-index:7
Height:calc (100% Muay 10% Q7)
}
.rainbowspan:nth-child (4):: after {
Color:tomato
Z-index:8
Height:calc (100% Muay 10% Q8)
}
Add animation effects:
.rainbowspan:: before
.rainbowspan:: after {
Animation:animate0.8sinfinitealternate
Filter:opacity (0)
}
@ keyframesanimate {
From {
Filter:opacity (0)
}
To {
Filter:opacity (1)
}
}
Set a delay for the layer to increase the sense of motion:
.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)
}
Finally, set the original text to a transparent color:
.rainbow {
Color:transparent
}
After reading this article, I believe you have a certain understanding of "how to use pure CSS to achieve the effect of rainbow stripe text". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!
