So verwenden Sie reines CSS, um den Effekt zu erzielen, dass die Schaltfläche beim Schweben nach rechts verschoben wird (Quellcode beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Button-Effekt beim Bewegen nach rechts zu realisieren (Quellcode im Anhang). Ich hoffe, dass er einen gewissen Referenzwert hat Es wird Ihnen helfen.

Effektvorschau

Quellcode-Download

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

Codeinterpretation

definiert dom, die Navigation enthält eine ungeordnete Liste, ein span ist in das Listenelement eingebettet und der Text wird in span geschrieben:

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

Zentrierte Anzeige:

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

Führungssymbol am vorderen Ende des Listenelements ausblenden:

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

Größe und Farbe der Schaltfläche festlegen:

nav li {
    width: 8em;
    height: 2em;
    font-size: 25px;
    color: orange;
}

Legen Sie den Textstil fest, achten Sie auf die Höhe 120%, span ist größer als das übergeordnete li:

nav li span {
    position: relative;
    box-sizing: border-box;
    width: inherit;
    height: 120%;
    top: -10%;
    background-color: #333;
    border: 2px solid;
    font-family: sans-serif;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
}

Verschieben Sie das span-Element leicht nach rechts:

nav li span {
    transform: translateX(4px);
}

Listenelement verwenden li 1 vertikale Linie am linken Rand der Schaltfläche zeichnen:

nav li {
    box-sizing: border-box;
    border-left: 2px solid;
}

Verwenden Sie das Pseudoelement des Listenelements, um 2 weitere vertikale Linien zu zeichnen, und ihre Höhe verringert sich An dieser Stelle befinden sich auf der linken Seite der Schaltfläche drei vertikale Linien:

nav li {
    position: relative;
}

nav li::before,
nav li::after
 {
    content: '';
    position: absolute;
    width: inherit;
    border-left: 2px solid;
    z-index: -1;
}

nav li::before {
    height: 80%;
    top: 10%;
    left: -8px;
}

nav li::after {
    height: 60%;
    top: 20%;
    left: -14px;
}

Dunkeln Sie die Farbe der beiden vertikalen Linien des Pseudoelements allmählich ab, um ein Gefühl der Hierarchie zu erzeugen:

nav li::before {
    filter: brightness(0.8);
}

nav li::after {
    filter: brightness(0.6);
}

Maus-Hover-Effekt hinzufügen Der Standardzustand ist, dass die Schaltfläche die drei vertikalen Linien abdeckt. Wenn die Maus schwebt, bewegt sich die Schaltfläche nach rechts und zeigt 3 vertikale Linien an:

nav li:hover span {
    transform: translateX(4px);
}

nav li span {
    /* transform: translateX(4px); */
    transform: translateX(-16px);
    transition: 0.3s;
}

Weil die Die Standardposition der Schaltfläche ist links. Um diesen Versatz auszugleichen, verschieben Sie das Listenelement leicht nach rechts:

nav ul {
    transform: translateX(16px);
}

Fügen Sie dem Dom ein paar weitere Schaltflächen hinzu:

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

Set der Abstand der Knöpfe:

nav li {
    margin-top: 0.8em;
}

Fertig!

Verwandte Empfehlungen:

Wie zeichne ich ein schlagendes Herz mit reinem CSS (Codebeispiel)

Wie verwende ich CSS und GSAP, um mehrere zu erreichen? Tasten Kontinuierliche Animation von Frames (mit Quellcode)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um den Effekt zu erzielen, dass die Schaltfläche beim Schweben nach rechts verschoben wird (Quellcode beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!