So erzielen Sie Spezialeffekte mit sechseckigen Tasten

Dieses Mal zeige ich Ihnen, wie Sie Spezialeffekte mit sechseckigen Schaltflächen implementieren und welche Vorsichtsmaßnahmen Sie treffen müssen, um Spezialeffekte mit sechseckigen Schaltflächen zu erzielen. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Code-Interpretation

Dom definieren, das nur 1 Schaltfläche im Container enthält:

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

Schaltflächenstil definieren:

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);
}

2 Neigungen mit Pseudoelementen-Rechteck hinzufügen :

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));
}

Mouse-Over-Effekt hinzufügen:

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);
}

Fügen Sie mehrere Schaltflächen zu Dom hinzu, um eine Gruppe von Schaltflächen zu bilden:

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

Der Mouse-Over-Effekt befindet sich zwischen den Schaltflächen. Lassen Sie etwas Spielraum :

nav ul li {
    margin: 2em;
}

Fügen Sie zwei weitere Schaltflächensätze hinzu:

<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
    

Probieren Sie abschließend einige Variationen aus:

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);
}

Sie sind fertig!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung des JS-Karussell-Stay-Effekts

Die Schritt-für-Schritt-Methode von Ausführen von Node-Service-Anweisungen im Linux-Hintergrund

Das obige ist der detaillierte Inhalt vonSo erzielen Sie Spezialeffekte mit sechseckigen Tasten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!