How to use pure CSS to achieve the text effect of tearing tinfoil (with code)-CSS Tutorial-php.cn

Table of Contents

Effect preview

Source code download

Code Interpretation

Home

Web Front-end

CSS Tutorial

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

Aug 28, 2018 am 09:41 AM

background css flex html5 front end

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!

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