So erzielen Sie mit reinem CSS den Effekt von regenbogengestreiftem Text (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Effekt von Regenbogenstreifentext (mit Code) zu erzielen. Ich hoffe, dass dies der Fall ist hilfreich für Sie.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, der Container enthält Text und enthält 4 für Spezialeffekte, der Datentext-Attributwert von Gleich wie Text:

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

Zentrierte Anzeige:

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

Textstil definieren:

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

Ebenen mit Pseudoelementen hinzufügen, um einen Regenbogeneffekt zu erzeugen:

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

Animationseffekt hinzufügen:

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

Legen Sie eine Verzögerung für die Ebene fest, um die Dynamik zu verbessern:

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

Stellen Sie abschließend den Originaltext auf transparente Farbe:

.rainbow {
    color: transparent;
}

Sie sind fertig !

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um Eis am Stiel-Animationseffekte zu erzielen (mit Code)

So verwenden Sie reines CSS, um metallischen Glanz zu erzielen Animationseffekt einer dreidimensionalen Schaltfläche (mit Quellcode)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Effekt von regenbogengestreiftem Text (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!