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

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir l'effet d'animation de la déconnexion du texte (code source ci-joint). J'espère qu'il le fera. vous être utile.

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

Définissez dom, il n'y a qu'un seul élément, l'élément a un attribut data-text, le la valeur de l'attribut est égale à l'élément Texte à l'intérieur :

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

Affichage centré :

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

Définir la couleur d'arrière-plan dégradé :

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

Définir la taille de la police du texte :

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

Utiliser des pseudo-éléments pour ajouter du texte :

.text {
    position: relative;
}

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

Définir le masque du texte à gauche :

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

Définir l'arrière-plan et le masque de le texte de droite :

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

Au survol de la souris, le texte masqué est décalé des deux côtés :

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

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

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

Masquer les éléments auxiliaires, dont la couleur de fond du texte original et pseudo-éléments :

.text {
    color: transparent;
}

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

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

Ajouter un effet d'inclinaison au texte des deux côtés :

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

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

Ajuster finement la hauteur du texte :

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

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

Vous avez terminé !

Recommandations associées :

Comment utiliser CSS pour obtenir l'effet de bordures animées en dégradé (avec code)

Comment utiliser CSS et mode de mélange de couleurs Implémenter l'effet d'animation du chargeur (avec code)

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!