Comment utiliser du CSS pur pour obtenir l'effet de survol des boutons (code source ci-joint)

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir l'effet de survol des boutons (code source ci-joint). 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- fin-daily-challenges

Interprétation du code

Définir dom, le conteneur est une liste non ordonnée, contenant 4 éléments, représentant 4 boutons :

    
• home
    
• products
    
• services
    
• contact

Affichage centré :

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

Supprimez le symbole devant l'élément de liste :

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

Définissez le style de la bordure et de l'arrière-plan du bouton. L'arrière-plan utilise une couleur dégradée, mais la direction du dégradé. alternatives :

ul li {
    box-sizing: border-box;
    width: 15em;
    height: 3em;
    font-size: 20px;
    border-radius: 0.5em;
    margin: 0.5em;
    box-shadow: 0 0 1em rgba(0,0,0,0.2);
}

ul li:nth-child(odd) {
    background: linear-gradient(to right, orange, tomato);
}

ul li:nth-child(even) {
    background: linear-gradient(to left, orange, tomato);
}

Définissez le style du texte sur le bouton, alternativement à gauche ou à droite :

ul li {
    color: white;
    font-family: sans-serif;
    text-transform: capitalize;
    line-height: 3em;
}

ul li:nth-child(odd) {
    text-align: left;
    padding-left: 10%;
}

ul li:nth-child(even) {
    text-align: right;
    padding-right: 10%;
}

Définissez l'effet de perspective du bouton, faites pivoter alternativement à gauche et à droite , et la distance de perspective à ce moment est 500px, veuillez noter que l'ordre des fonctions perspective() et rotateY() ne peut pas être écrit à l'envers :

ul li:nth-child(odd) {
    transform: perspective(500px) rotateY(45deg);
}

ul li:nth-child(even) {
    transform: perspective(500px) rotateY(-45deg);
}

ajoute un effet de survol au bouton, de sorte que la distance de perspective en survol soit raccourcie à 200px , plus la distance de perspective est courte, plus la rotation apparaît grande :

ul li:nth-child(odd):hover {
    transform: perspective(200px) rotateY(45deg);
    padding-left: 5%;
}

ul li:nth-child(even):hover {
    transform: perspective(200px) rotateY(-45deg);
    padding-right: 5%;
}

Enfin, définissez un temps d'assouplissement pour lisser la transition de l'effet :

ul li {
    transition: 0.3s;
    cursor: pointer;
}

Vous avez terminé !

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!