Comment utiliser du CSS pur pour obtenir l'effet d'un texte à rayures arc-en-ciel (avec code)

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir l'effet d'un texte à rayures arc-en-ciel (avec du code). J'espère que ce sera le cas. utile pour vous.

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

Définissez dom, le conteneur contient du texte et contient 4 Identique au texte :

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

Affichage centré :

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

Définir le style du texte :

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

Ajouter des calques avec des pseudo-éléments pour créer un effet arc-en-ciel :

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

Ajouter un effet d'animation :

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

Définissez un délai pour le calque afin d'améliorer la dynamique :

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

Enfin, définissez le texte original sur une couleur transparente :

.rainbow {
    color: transparent;
}

Fait !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir des effets d'animation de popsicle (avec code)

Comment utiliser du CSS pur pour obtenir un éclat métallique Effet d'animation du bouton tridimensionnel (avec code source)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!