ホームページ > ウェブフロントエンド > CSSチュートリアル > 純粋な CSS を使用して、ボタンの両側から装飾要素をスライドさせるホバー効果を実現する方法 (ソース コードを添付)

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

不言
リリース: 2019-11-30 16:40:24
転載
3049 人が閲覧しました

この記事の内容は、純粋な CSS を使用してボタンの両側から装飾要素をスライドさせるホバー効果を実現する方法に関するものです (ソースコードが添付されています)。ご参考になれば幸いです。

エフェクトのプレビュー

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

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

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

コード解釈

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

1

 

ログイン後にコピー
ログイン後にコピー
        
  • home

中央揃え表示:

1

2

3

4

5

6

7

8

body {

  margin: 0;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(deepskyblue, navy);

}

ログイン後にコピー

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

1

2

3

4

ul {

  padding: 0;

  list-style-type: none;

}

ログイン後にコピー

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

1

2

3

4

5

6

ul li {

  color: #ddd;

  font-size: 25px;

  font-family: sans-serif;

  text-transform: uppercase;

}

ログイン後にコピー

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

1

2

3

4

5

6

7

8

9

10

11

12

ul li {

  position: relative;

}

 

ul li::before {

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  background: tomato;

  left: -100%;

}

ログイン後にコピー

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

1

2

3

4

5

6

7

8

9

ul li::after {

  content: '';

  position: absolute;

  width: 100%;

  height: 0.2em;

  background: tomato;

  bottom: 0;

  left: 100%;

}

ログイン後にコピー

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

1

2

3

4

5

6

7

ul li::before {

  transition: 0.4s ease-out;

}

 

ul li:hover::before {

  left: 100%;

}

ログイン後にコピー

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

1

2

3

4

5

6

7

ul li::after {

  transition: 0.3s 0.3s ease-out;

}

 

ul li:hover::after {

  left: 0%;

}

ログイン後にコピー

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

1

2

3

4

5

6

7

8

ul li {

  transition: 0.3s;

  cursor: pointer;

}

 

ul li:hover {

  color: #fff;

}

ログイン後にコピー

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

1

2

3

ul li {

  overflow: hidden;

}

ログイン後にコピー

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

1

 

ログイン後にコピー
ログイン後にコピー
        
  • home
  •     
  • products
  •     
  • services
  •     
  • contact

複数のボタンを配置します。

1

2

3

4

5

6

7

8

9

ul {

  display: flex;

  flex-direction: column;

  align-items: center;

}

 

ul li {

  margin: 0.5em;

}

ログイン後にコピー

これで完了です。

さらにクールな CSS3 および JavaScript 特殊効果コードは、次の場所から入手できます: javascript 特殊効果コレクション

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

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート