How to use pure CSS to achieve the text effect of foil ripped (with code)

This article brings you the content is about how to use pure CSS to achieve the text effect of foil ripped (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, which contains a number of child elements, each of which contains one letter:

<div class= "text" >    <span>A</span>    <span>W</span>    <span>e</ span>    <span>S</span>    <span>O</span>    <span>M</span>    < Span>e</span></div>

Define Container Dimensions:

body {  margin:0;  HEIGHT:100VH;}. text {  width:100%;  height:100%;}

To set how child elements are laid out:

. text {  Display:flex;  Justify-content:space-between;}. Text span {    width:100%;}

Define Text styles:

. text span {    color:darkslategray;    Background-color:rgb (127, 141);    Font-family:serif;    Font-size:12vmin;    text-shadow:1px 1px 1px white;    Display:flex;    Align-items:center;    Justify-content:center;}

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

. Text Span:nth-child (odd) {    background:linear-gradient (to        Bottom,        rgba (127,, 141, 0.2) 0,         RGBA (127, 141, 0) 33%,         rgba (127,, 141, 0.7) 66%,         rgba (127,, 141, 0.2) 100%    );}. Text Span:nth-child (even) {    background:linear-gradient (to        top,        rgba (127, 141, 0.2) 0,         Rgba (127, 141, 0) 33%,         rgba (127,, 141, 0.7) 66%,         rgba (127,, 141, 0.2) 100%    );}

Add a divider between the text and the 1th text without dividing lines:

. text span {    position:relative;}. Text Span:not (: first-child):: Before {    content: ';    Position:absolute;    width:10px;    height:90%;    Background-color:black;    Left: -5px;    border-left:1px solid white;    border-radius:50%;}

Let the divider line up and down:

. Text Span:not (: first-child): Nth-child (Odd):: before {    top:2%;}. Text Span:not (: first-child): Nth-child (even):: before {    bottom:2%;}

Done!