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

Editor to share with you how to use pure CSS to achieve the text effect of tin foil tear, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Code interpretation

Define dom, and the container contains several child elements, each containing a letter:

A

W

E

S

O

M

E

Define the container size:

Body {

Margin:0

Height:100vh

}

.text {

Width:100%

Height:100%

}

Set the layout of the child elements:

.text {

Display:flex

Justify-content:space-between

}

.textspan {

Width:100%

}

Define the text style:

.textspan {

Color:darkslategray

Background-color:rgb (127140141)

Font-family:serif

Font-size:12vmin

Text-shadow:1px1px1pxwhite

Display:flex

Align-items:center

Justify-content:center

}

Sets the gradient of the background of the text, and the gradient of odd-digit text and even-digit text is in the opposite direction:

.textspan:nth-child (odd) {

Background:linear-gradient (

Tobottom

Rgba (127, 140, 141, 0.2) 0%

Rgba (127, 140,141, 0) 33%

Rgba (127, 140,141, 0.7) 66%

Rgba (127, 140, 141, 0.2) 100%

)

}

.textspan:nth-child (even) {

Background:linear-gradient (

Totop

Rgba (127, 140, 141, 0.2) 0%

Rgba (127, 140,141, 0) 33%

Rgba (127, 140,141, 0.7) 66%

Rgba (127, 140, 141, 0.2) 100%

)

}

Increase the separation line between the text, do not add the separation line before the first text:

.textspan {

Position:relative

}

.textspan: not (: first-child):: before {

Content:''

Position:absolute

Width:10px

Height:90%

Background-color:black

Left:-5px

Border-left:1pxsolidwhite

Border-radius:50%

}

Misplace the separation line up and down:

.textspan: not (: first-child): nth-child (odd):: before {

Top:2%

}

.textspan: not (: first-child): nth-child (even):: before {

Bottom:2%

}

The above is all the contents of this article entitled "how to use pure CSS to achieve the text effect torn apart by tin foil". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.