So erzielen Sie mit reinem CSS den Effekt von regenbogengestreiftem Text (mit Code)-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-08-22 11:05:12

Original

3481 Leute haben es durchsucht

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

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

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>

Nach dem Login kopieren

Zentrierte Anzeige:

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

Nach dem Login kopieren

Textstil definieren:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Stellen Sie abschließend den Originaltext auf transparente Farbe:

.rainbow {
    color: transparent;
}

Nach dem Login kopieren

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!