So verwenden Sie reines CSS, um beim Umschalten der Schaltflächen den Hover-Animationseffekt des Hintergrunds zu erzielen

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Hover-Animationseffekt beim Umschalten von Schaltflächen zu erzielen. Ich hoffe, dass dies der Fall ist nützlich für Sie.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, die Navigation enthält eine ungeordnete Liste und es gibt ein Listenelement in der Liste:

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

Zentrierte Anzeige:

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

Das Stiefelsymbol am vorderen Ende des Listenelements ausblenden:

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

Größe des Schaltflächencontainers definieren:

:root {
    font-size: 10px;
}

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

Textstil festlegen:

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

Erstellen 2 Hintergrundfarbblöcke mit Pseudoelementen:

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

Lassen Sie den Hintergrundblock dahinter nach rechts unten wandern und lassen Sie den Hintergrundblock davor einen Schatten werfen, um den dreidimensionalen Effekt zu verstärken:

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

Fügen Sie als Nächstes einen Hover-Effekt hinzu.

Legen Sie die Beschleunigungszeit fest. Sowohl das Hauptelement als auch das Pseudoelement haben einen Beschleunigungseffekt:

nav li {
    transition: 0.3s;
}

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

Beim Bewegen des Mauszeigers werden die Farben der beiden Hintergrundfarbblöcke vertauscht:

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

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

Gleichzeitig bewegt sich der Hintergrundfarbblock dahinter nach links oben und die Schaltfläche als Ganzes nach rechts unten:

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

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

Gleichzeitig ändern Sie die Farbe des Textes, wenn Sie mit der Maus darüber fahren :

nav li:hover {
    color: white;
}

Weitere Schaltflächen hinzufügen:

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

Zum Schluss vergrößern Sie den Abstand zwischen den Schaltflächen:

nav li {
    margin: 3rem;
}

Fertig!

Verwandte Empfehlungen:

So verwenden Sie CSS zum Implementieren eines Entenkopfes (mit Code)

So verwenden Sie reines CSS zum Implementieren ein schwarzer Kopf Angry Birds (mit Code)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um beim Umschalten der Schaltflächen den Hover-Animationseffekt des Hintergrunds zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!