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

How to use pure CSS to achieve the effect of rainbow striped text (with code)

不言

Release： 2018-08-22 11:05:12

Original

3481 people have browsed it

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

Effect preview

How to use pure CSS to achieve the effect of rainbow striped text (with code)

Source code download

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

Code Interpretation

Define dom, the container contains text, and contains 4 for special effects, the data-text attribute value of is Same as text:

<p>
    web
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</p>

Copy after login

Centered display:

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
}

Copy after login

Define text style:

.rainbow {
    color: white;
    font-size: 300px;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: bold;
    line-height: 1em;
    position: relative;
}

Copy after login

Add layers with pseudo elements to create a rainbow effect:

.rainbow span::before,
.rainbow span::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.rainbow span:nth-child(1)::before {
    color: orchid;
    z-index: 1;
    height: calc(100% - 10% * 1);
}

.rainbow span:nth-child(1)::after {
    color: mediumpurple;
    z-index: 2;
    height: calc(100% - 10% * 2);
}

.rainbow span:nth-child(2)::before {
    color: deepskyblue;
    z-index: 3;
    height: calc(100% - 10% * 3);
}

.rainbow span:nth-child(2)::after {
    color: cyan;
    z-index: 4;
    height: calc(100% - 10% * 4);
}

.rainbow span:nth-child(3)::before {
    color: mediumspringgreen;
    z-index: 5;
    height: calc(100% - 10% * 5);
}

.rainbow span:nth-child(3)::after {
    color: yellow;
    z-index: 6;
    height: calc(100% - 10% * 6);
}

.rainbow span:nth-child(4)::before {
    color: gold;
    z-index: 7;
    height: calc(100% - 10% * 7);
}

.rainbow span:nth-child(4)::after {
    color: tomato;
    z-index: 8;
    height: calc(100% - 10% * 8);
}

Copy after login

Add animation effect:

.rainbow span::before,
.rainbow span::after {
    animation: animate 0.8s infinite alternate;
    filter: opacity(0);
}

@keyframes animate {
    from {
        filter: opacity(0);
    }

    to {
        filter: opacity(1);
    }
}

Copy after login

Set a delay for the layer to enhance the dynamic:

.rainbow span:nth-child(1)::before {
    animation-delay: calc(0.8s - 0.1s * 1);
}

.rainbow span:nth-child(1)::after {
    animation-delay: calc(0.8s - 0.1s * 2);
}

.rainbow span:nth-child(2)::before {
    animation-delay: calc(0.8s - 0.1s * 3);
}

.rainbow span:nth-child(2)::after {
    animation-delay: calc(0.8s - 0.1s * 4);
}

.rainbow span:nth-child(3)::before {
    animation-delay: calc(0.8s - 0.1s * 5);
}

.rainbow span:nth-child(3)::after {
    animation-delay: calc(0.8s - 0.1s * 6);
}

.rainbow span:nth-child(4)::before {
    animation-delay: calc(0.8s - 0.1s * 7);
}

.rainbow span:nth-child(4)::after {
    animation-delay: calc(0.8s - 0.1s * 8);
}

Copy after login

Finally, set the original text to transparent color:

.rainbow {
    color: transparent;
}

Copy after login

You’re done!

Related recommendations:

How to use pure CSS to achieve popsicle animation effects (with code)

How to use pure CSS to achieve metallic luster Animation effect of three-dimensional button (source code attached)

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