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

不言
Release: 2018-08-28 09:41:13
Original
2336 people have browsed it

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

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

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>
Copy after login

Define container size:

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

.text {
  width: 100%;
  height: 100%;
}
Copy after login

Set the layout of child elements:

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

.text span {
    width: 100%;
}
Copy after login

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;
}
Copy after login

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%
    );
}
Copy after login

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%;
}
Copy after login

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%;
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!