純粋な CSS を使用して、ホバー時にボタンを右に移動する効果を実現する方法 (ソースコード添付)

この記事の内容は、純粋な CSS を使用してホバー時に右に移動するボタンの効果を実現する方法に関するものです (ソース コードが添付されています)。必要な方は参考にしていただければ幸いです。それはあなたを助けます。

エフェクトのプレビュー

ソース コードのダウンロード

https://github.com/comehop​​e/front- end-daily-challenges

コード解釈

domを定義します。ナビゲーションには順序なしリストが含まれ、spanがリスト項目に埋め込まれ、テキストは次のように記述されます。 scan 中央:

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

中央揃え表示:

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

リスト項目の前端のガイド記号を非表示:

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

サイズと設定を設定します。ボタンの色:

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

テキスト スタイルを設定します。高さは 120%、span は親の 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;
}

willspan 要素を少し右に移動します:

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

リスト項目 li の左の境界線を使用して垂直線を描きます。 :

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

リスト項目の左側の境界線を使用します。疑似要素はさらに 2 本の垂直線を描画し、その高さが順番に減少します。この時点で、リスト項目の左側には合計 3 本の垂直線があります。ボタン:

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

疑似要素の 2 つの縦線の色を徐々に暗くし、少し階層感を高めます:

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

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

マウス ホバー効果を追加します。デフォルトの状態は、ボタンは 3 つの垂直線をカバーします。マウスをホバーすると、ボタンは右に移動し、3 つの垂直線が表示されます。

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

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

ボタンのデフォルトの位置は左側にあるため、このオフセットをオフセットするには、次のようにします。リスト項目を少し右に移動します:

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

さらにいくつかのボタンを dom に追加します:

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

ボタンの間隔を設定します:

nav li {
    margin-top: 0.8em;
}

これで完了です！

関連する推奨事項:

純粋な CSS を使用して鼓動する心臓を描画する方法 (コード例)

CSS と GSAP を使用して複数の機能を実装する方法キー フレームの連続アニメーション (ソースコード添付)

以上が純粋な CSS を使用して、ホバー時にボタンを右に移動する効果を実現する方法 (ソースコード添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。