So verwenden Sie reines CSS, um den Hover-Effekt von Schaltflächen zu erzielen (Quellcode im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Hover-Effekt von Schaltflächen zu erzielen (Quellcode im Anhang). Ich hoffe, dass dies der Fall ist nützlich für Sie.

Effektvorschau

Quellcode-Download

https://github.com/comehope/front- end-daily-challenges

Codeinterpretation

Dom definieren, der Container ist eine ungeordnete Liste, die 4 Elemente enthält und 4 Schaltflächen darstellt:

    
• home
    
• products
    
• services
    
• contact

Zentrierte Anzeige:

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

Entfernen Sie das Symbol vor dem Listenelement:

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

Legen Sie den Rahmen- und Hintergrundstil der Schaltfläche fest. Der Hintergrund verwendet eine Verlaufsfarbe, aber die Richtung des Verlaufs wechselt der Reihe nach:

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

Stellen Sie den Stil des obigen Textes für die Schaltfläche ein, abwechselnd nach links oder rechts:

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

Stellen Sie den perspektivischen Effekt der Schaltfläche ein und drehen Sie abwechselnd nach links und rechts. Zu diesem Zeitpunkt beträgt der perspektivische Abstand 500px. Achten Sie auf die Funktion perspective(). Die Reihenfolge der Funktion rotationY() kann nicht umgekehrt geschrieben werden:

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

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

fügt der Schaltfläche einen Hover-Effekt hinzu, sodass der perspektivische Abstand beim Schweben auf 200px verkürzt wird . Je kürzer der perspektivische Abstand, desto größer die Rotationsamplitude:

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

Stellen Sie abschließend eine Entspannungszeit ein, um den Übergang zu glätten:

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

Fertig!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um den Hover-Effekt von Schaltflächen zu erzielen (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!