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

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

エフェクトのプレビュー

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

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

コード解釈

domを定義します。コンテナは、4つのボタンを表す4つの要素を含む順序なしリストです:

    
• home
    
• products
    
• services
    
• contact

中央揃え表示:

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

リスト項目の前のシンボルを削除します:

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

ボタンの境界線と背景のスタイルを設定します。背景にはグラデーション色が使用されますが、グラデーションの方向は順番に変わります。

ボタンを設定します。上のテキストのスタイルを左右交互に設定します:

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

ボタンの遠近効果を設定します。左右に交互に回転します。このときの遠近距離は

500px です。 、perspective() 関数とrotateY() 関数の順序を逆に書くことはできないことに注意してください:

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

ボタンにホバー効果を追加し、ホバリング時の視点距離が短くなるようにします。

200px まで、遠近距離が長くなります。短ければ短いほど、回転が大きく表示されます:

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

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

最後に、エフェクトのトランジションを滑らかにするイージング時間を設定します:

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

これで完了です。

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