Comment obtenir des effets spéciaux de boutons hexagonaux-js tutoriel-php.cn

Comment obtenir des effets spéciaux de boutons hexagonaux

php中世界最好的语言

Libérer： 2018-05-25 11:21:45

original

2137 Les gens l'ont consulté

Cette fois, je vais vous montrer comment réaliser des effets spéciaux de bouton hexagonal et quelles sont les précautions à prendre pour réaliser des effets spéciaux de bouton hexagonal. Voici un cas pratique, jetons un oeil.

Interprétation du code

Définir dom, le conteneur ne contient qu'un seul bouton :

<nav>
    <ul>
        <li>Home</li>
    </ul>
</nav>

Copier après la connexion

Définir le style du bouton :

nav {
    --h: 3em;
}
nav ul {
    padding: 0;
}
nav ul li {
    list-style-type: none;
    width: calc(var(--h) * 1.732);
    height: var(--h);
    background-color: #333;
    color: white;
    font-family: sans-serif;
    text-align: center;
    line-height: var(--h);
}

Copier après la connexion

Utiliser des pseudo-éléments Ajouter 2 rectangles inclinés :

nav ul li {
    position: relative;
}
nav ul li::before,
nav ul li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-color: #333;
}
nav ul li::before{
    transform: rotate(60deg) translateX(calc(var(--h) * -2));
}
nav ul li::after{
    transform: rotate(-60deg) translateX(calc(var(--h) * 2));
}

Copier après la connexion

Ajouter un effet de survol de la souris :

nav ul li::before,
nav ul li::after {
    z-index: -1;
    filter: opacity(0);
    transition: 0.3s;
}
nav ul li:hover::before {
    filter: opacity(1);
    transform: rotate(60deg) translateX(0);
}
nav ul li:hover::after {
    filter: opacity(1);
    transform: rotate(-60deg) translateX(0);
}

Copier après la connexion

Ajouter plusieurs boutons au dom pour former un groupe de boutons :

<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>

Copier après la connexion

Quitter une marge entre les boutons pour l'effet de survol :

nav ul li {
    margin: 2em;
}

Copier après la connexion

Ajoutez deux autres jeux de boutons :

<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>
<nav>
    <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</nav>

    
        Home
        Product Vs
        Services
        Contact

Copier après la connexion

Enfin, essayez quelques variantes :

nav {
    --h: 3em;
}
nav:nth-child(1) {
    --rate: 1.5;
    --bgcolor: black;
}
nav:nth-child(2) {
    --rate: 1.732;
    --bgcolor: brown;
}
nav:nth-child(3) {
    --rate: 2;
    --bgcolor: green;
}
nav ul li {
    width: calc(var(--h) * var(--rate));
    background-color: var(--bgcolor);
}
nav ul li::before,
nav ul li::after {
    background-color: var(--bgcolor);
}

Copier après la connexion

Terminé !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour mettre en œuvre l'effet de séjour du carrousel JS

La méthode étape par étape de exécution des instructions de service de nœud en arrière-plan Linux

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!