Comment utiliser du CSS pur pour obtenir l'effet d'animation de survol de l'arrière-plan lors du changement de bouton

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir l'effet d'animation de survol de l'arrière-plan lors du changement de bouton. Il a une certaine valeur de référence. J'espère que ce sera le cas. utile pour vous.

Aperçu de l'effet

Téléchargement du code source

https://github.com/comehope/front-end-daily -défis

Interprétation du code

Définissez dom, la navigation contient une liste non ordonnée, et il y a un élément de liste dans la liste :

<nav>
    <ul>
        <li>home</li>
    </ul>
</nav>

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: teal;
}

Masquer le symbole du guide au devant de l'élément de liste :

nav ul {
    padding: 0;
    list-style-type: none;
}

Définir la taille du conteneur de boutons :

:root {
    font-size: 10px;
}

nav li {
    width: 20rem;
    height: 7rem;
}

Définir le style du texte :

nav li {
    font-size: 20px;
    text-align: center;
    line-height: 7rem;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

Utilisez Créer 2 blocs de couleur d'arrière-plan avec des pseudo-éléments :

nav li {
    position: relative;
}

nav li::before,
nav li::after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    top: 0;
    left: 0;
}

nav li::before {
    background-color: white;
    z-index: -1;
}

nav li::after {
    background-color: goldenrod;
    z-index: -2;
}

Décalez le bloc d'arrière-plan arrière en bas à droite et laissez le bloc d'arrière-plan avant projeter des ombres pour augmenter l'aspect tridimensionnel. effet :

nav li::before {
    box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}

nav li::after {
    transform: translate(1.5rem, 1.5rem);
}

Ajoutez ensuite l'effet de survol.

Définissez le temps d'assouplissement. L'élément principal et le pseudo-élément auront un effet d'assouplissement :

nav li {
    transition: 0.3s;
}

nav li::before,
nav li::after {
    transition: 0.3s;
}

Au survol, les couleurs des 2 blocs de couleur d'arrière-plan sont inversées :

nav li:hover::before {
    background-color: goldenrod;
}

nav li:hover::after {
    background-color: white;
}

En même temps, le bloc de couleur d'arrière-plan derrière se déplace vers le haut à gauche, et le bouton dans son ensemble se déplace vers le bas à droite :

nav li:hover {
    transform: translate(1.5rem, 1.5rem);
}

nav li:hover::after {
    transform: translate(-1.5rem, -1.5rem);
}

En même temps, laissez le texte changer de couleur au survol :

nav li:hover {
    color: white;
}

Ajoutez quelques boutons supplémentaires :

<nav>
    <ul>
        <li>home</li>
        <li>products</li>
        <li>services</li>
        <li>contact</li>
    </ul>
</nav>

Enfin, augmentez l'espacement entre les boutons :

nav li {
    margin: 3rem;
}

Vous c'est fini !

Recommandations associées :

Comment utiliser CSS pour implémenter une tête de canard (avec code)

Comment utiliser CSS pur pour implémenter une tête noire Angry Birds (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!