How to use pure CSS to achieve the text effect of tearing apart tin foil
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!
