How to use pure CSS to achieve the text effect of tearing tinfoil (with code)

The content of this article is about how to use pure CSS to achieve the text effect of tearing tinfoil (with code). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

Effect preview

Source code download

https://github.com/comehope/front- end-daily-challenges

Code Interpretation

Define dom, the container contains several sub-elements, each sub-element contains a letter:

<div>
    <span>A</span>
    <span>W</span>
    <span>E</span>
    <span>S</span>
    <span>O</span>
    <span>M</span>
    <span>E</span>
</div>

Define container size:

body {
  margin: 0;
  height: 100vh;
}

.text {
  width: 100%;
  height: 100%;
}

Set the layout of child elements:

.text {
  display: flex;
  justify-content: space-between;
}

.text span {
    width: 100%;
}

Define the text style:

.text span {
    color: darkslategray;
    background-color: rgb(127, 140, 141);
    font-family: serif;
    font-size: 12vmin;
    text-shadow: 1px 1px 1px white;
    display: flex;
    align-items: center;
    justify-content: center;
}

Set the gradient color of the background of the text, the gradient direction of the odd-numbered text and the even-numbered text It's the opposite:

.text span:nth-child(odd) {
    background: linear-gradient(
        to bottom,
        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%
    );
}

.text span:nth-child(even) {
    background: linear-gradient(
        to top,
        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%
    );
}

Add a dividing line between words. No need to add a dividing line before the first text:

.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%;
}

Make the dividing line misaligned:

.text span:not(:first-child):nth-child(odd)::before {
    top: 2%;
}

.text span:not(:first-child):nth-child(even)::before {
    bottom: 2%;
}

You're done !

Related recommendations:

How to use pure CSS to implement the special effect of picking up draft beer (source code attached)

How to use pure CSS to implement an hourglass Animation effect

How to use css to implement a page that monitors network connection status

The above is the detailed content of How to use pure CSS to achieve the text effect of tearing tinfoil (with code). For more information, please follow other related articles on the PHP Chinese website!