Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.