So verwenden Sie reines CSS, um einen Animationseffekt zum Einblenden von Text zu erzielen (Quellcode im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Einblend-Animationseffekt von Text zu erzielen (ich hoffe, er hat einen gewissen Referenzwert). es wird dir weiterhelfen.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, der Container enthält mehrere Unterelemente, jedes Unterelement besteht aus 1 Buchstaben:

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

Zentrierte Anzeige:

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

Legen Sie den Schriftstil fest:

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

Definieren Sie den Bewegungseffekt von Text von links nach rechts:

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

Fügen Sie den Animationseffekt der Textskalierung hinzu:

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

Fügen Sie die Texteingabe und den Ein- und Ausblendeffekt beim Erscheinen hinzu:

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

Fügen Sie den Effekt der Änderung der Textfarbe hinzu:

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

Legen Sie die Indexvariable des Unterelements fest:

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

Animationsverzögerung des Unterelements festlegen:

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

Fertig!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um einen Animationseffekt zum Einblenden von Text zu erzielen (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!