純粋な CSS を使用してボタンの両側から要素をスライドさせるホバー効果を実現する方法 (ソースコードを添付)

この記事の内容は、純粋な CSS を使用してボタンの両側から要素をスライドさせるホバー効果を実現する方法に関するものです (ソースコードが添付されています)。これには特定の参考値があり、必要な友人は参照できます。それがあなたに役立つことを願っています。

エフェクトのプレビュー

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

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

コード解釈

domを定義します。コンテナは順序なしリストであり、リスト項目はボタンを表します:

    
• home

中央揃え表示:

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(deepskyblue, navy);
}

リスト項目の前にある記号を削除します:

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

ボタンのテキスト スタイルを設定します:

ul li {
  color: #ddd;
  font-size: 25px;
  font-family: sans-serif;
  text-transform: uppercase;
}

擬似要素を使用してボタンの左側にボックスを追加します:

ul li {
  position: relative;
}

ul li::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: tomato;
  left: -100%;
}

疑似要素を使用する ボタンの右側に下線を追加します。

ul li::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0.2em;
  background: tomato;
  bottom: 0;
  left: 100%;
}

次に、マウスオーバー効果を設定します。
マウスをホバーしていると、左側のボックスがテキストの位置に移動します:

ul li::before {
  transition: 0.4s ease-out;
}

ul li:hover::before {
  left: 100%;
}

右側の下線がテキストの位置に移動し、そのアニメーション時間は、ボックスのアニメーションが終了する前に開始します。:

ul li::after {
  transition: 0.3s 0.3s ease-out;
}

ul li:hover::after {
  left: 0%;
}

同時に、テキストの明るさを上げます。:

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

ul li:hover {
  color: #fff;
}

ボタンの外側の部分を非表示にして、四角形と下線を表示します。デフォルトでは、マウスをホバーしたときに両側からのみ変更されます。 サイドエントリ:

ul li {
  overflow: hidden;
}

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

    
• home
    
• products
    
• services
    
• contact

複数のボタンをレイアウトします:

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