Comment utiliser du CSS pur pour obtenir un effet d'animation de fondu en entrée de texte (code source ci-joint)-tutoriel CSS-php.cn

Comment utiliser du CSS pur pour obtenir un effet d'animation de fondu en entrée de texte (code source ci-joint)

不言

Libérer： 2018-09-21 10:31:01

original

4468 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir l'effet d'animation de fondu du texte (code source ci-joint). J'espère que les amis dans le besoin pourront s'y référer. cela vous sera utile.

Aperçu de l'effet

Comment utiliser du CSS pur pour obtenir un effet danimation de fondu en entrée de texte (code source ci-joint)

Téléchargement du code source

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

Interprétation du code

Définissez dom, le conteneur contient plusieurs sous-éléments, chaque sous-élément est de 1 lettre :

<div>
    <span>h</span>
    <span>a</span>
    <span>p</span>
    <span>p</span>
    <span>y</span>
    <span> </span>
    <span>h</span>
    <span>o</span>
    <span>l</span>
    <span>i</span>
    <span>d</span>
    <span>a</span>
    <span>y</span>
    <span>s</span>
</div>

Copier après la connexion

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(pink, white, pink);
}

Copier après la connexion

Définissez le style de police :

.container span {
    display: inline-block;
    color: purple;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 40px;
}

Copier après la connexion

Définissez l'effet de mouvement du texte de gauche à droite :

.container span {
    animation: sideSlide 4s forwards infinite;
    transform: translateX(-100vw);
}

@keyframes sideSlide {
    15%, 20% {
        transform: translateX(0.5em);
    }

    24% {
        transform: translateX(0);
    }

    25%, 75% {
        transform: translateX(0);
    }

    90%, 100% {
        transform: translateX(100vw);
    }
}

Copier après la connexion

Ajoutez l'effet d'animation de la mise à l'échelle du texte :

.container span {
    transform: translateX(-100vw) scale(0);
}

@keyframes sideSlide {
    15%, 20% {
        transform: translateX(0.5em) scale(1);
    }

    24% {
        transform: translateX(0) scale(1.2);
    }

    25%, 75% {
        transform: translateX(0) scale(1);
    }

    90%, 100% {
        transform: translateX(100vw) scale(0);
    }
}

Copier après la connexion

Ajoutez l'effet de fondu lorsque le texte entre et sort :

.container span {
    filter: opacity(0);
}

@keyframes sideSlide {
    15%, 20% {
        transform: translateX(0.5em) scale(1);
    }

    24% {
        transform: translateX(0) scale(1.2);
    }

    25%, 75% {
        transform: translateX(0) scale(1);
        filter: opacity(1);
    }

    90%, 100% {
        transform: translateX(100vw) scale(0);
        filter: opacity(0);
    }
}

Copier après la connexion

Ajoutez l'effet de changement de couleur du texte :

@keyframes sideSlide {
    15%, 20% {
        transform: translateX(0.5em) scale(1);
        color: purple;
    }

    24% {
        transform: translateX(0) scale(1.2);
        color: cyan;
    }

    25%, 75% {
        transform: translateX(0) scale(1);
        filter: opacity(1);
        color: purple;
    }

    90%, 100% {
        transform: translateX(100vw) scale(0);
        filter: opacity(0);
    }
}

Copier après la connexion

Définissez la variable d'indice de l'élément enfant :

.container span:nth-child(1) { --n: 1; }
.container span:nth-child(2) { --n: 2; }
.container span:nth-child(3) { --n: 3; }
.container span:nth-child(4) { --n: 4; }
.container span:nth-child(5) { --n: 5; }
.container span:nth-child(6) { --n: 6; }
.container span:nth-child(7) { --n: 7; }
.container span:nth-child(8) { --n: 8; }
.container span:nth-child(9) { --n: 9; }
.container span:nth-child(10) { --n: 10; }
.container span:nth-child(11) { --n: 11; }
.container span:nth-child(12) { --n: 12; }
.container span:nth-child(13) { --n: 13; }
.container span:nth-child(14) { --n: 14; }

Copier après la connexion

Définissez le délai d'animation des éléments enfants :

.container span {
    animation-delay: calc((var(--n) - 1) * 0.05s);
}

Copier après la connexion

Vous avez terminé !

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!