So verwenden Sie reines CSS, um einen Animationseffekt für die Texttrennung zu erzielen (Quellcode beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Animationseffekt der Texttrennung zu erzielen (Quellcode ist beigefügt). Ich hoffe, dass dies der Fall ist hilfreich sein.

Effektvorschau

Quellcode-Download

https://github.com/comehope/front- end-daily-challenges/tree/master/012-broken-text-effects

Codeinterpretation

Dom definieren, es gibt nur ein Element, das Element hat ein Datentextattribut, das Der Attributwert entspricht dem darin enthaltenen Elementtext:

<div class="text" data-text="BREAK">BREAK</div>

Zentrierte Anzeige:

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

Verlaufshintergrundfarbe festlegen:

body {
    background: linear-gradient(brown, sandybrown);
}

Schriftgröße des Texts festlegen:

.text {
    font-size: 5em;
    font-family: "arial black";
}

Verwenden Sie Pseudoelemente, um den Text zu vergrößern:

.text {
    position: relative;
}

.text::before,
.text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: lightyellow;
}

Legen Sie die Maske des Textes auf der linken Seite fest:

.text::before {
    background-color: darkgreen;
    clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%);
}

Legen Sie den Hintergrund und die Maske des Textes auf der rechten Seite fest:

.text::after {
    background-color: darkblue;
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%);
}

Wenn sich die Maus darüber bewegt, wird der maskierte Text jeweils nach beiden Seiten verschoben:

.text::before,
.text::after {
    transition: 0.2s;
}

.text:hover::before {
    left: -0.15em;
}

.text:hover::after {
    left: 0.15em;
}

Hilfselemente ausblenden, einschließlich der Hintergrundfarbe des Originaltexts und Pseudoelemente:

.text {
    color: transparent;
}

.text::before {
    /*background-color: darkgreen;*/
}

.text::after {
    /*background-color: darkblue;*/
}

Verzerrungseffekt hinzufügen Text auf beiden Seiten:

.text:hover::before {
    transform: rotate(-5deg);
}

.text:hover::after {
    transform: rotate(5deg);
}

Feinabstimmung der Texthöhe:

.text:hover::before {
    top: -0.05em;
}

.text:hover::after {
    top: 0.05em;
}

Fertig!

Verwandte Empfehlungen:

So verwenden Sie CSS, um den Effekt von animierten Rahmen mit Farbverlauf zu erzielen (mit Code)

So verwenden Sie CSS und Farbmischmodus. Implementieren Sie den Loader-Animationseffekt (mit Code)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um einen Animationseffekt für die Texttrennung zu erzielen (Quellcode beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!