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

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

不言

Libérer： 2018-08-22 11:05:12

original

3481 Les gens l'ont consulté

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

Comment utiliser du CSS pur pour obtenir leffet dun texte à rayures arc-en-ciel (avec code)

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>

Copier après la connexion

Affichage centré :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

.rainbow {
    color: transparent;
}

Copier après la connexion

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!