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

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

不言

Release： 2018-08-28 09:41:13

Original

2351 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!