CSSを使用してボタンホバーアニメーション効果を作成するにはどうすればよいですか?

CSS のホバー アニメーション効果とは、マウス ポインターを要素上に置くと要素の外観が変化することを意味します。 CSS を使用して、要素の拡大縮小、フェード、スライド、回転など、ホバー時にさまざまなアニメーション効果を作成します。

ボタンホバーアニメーション効果のプロパティ

• transform -このプロパティを使用すると、要素を拡大縮小、回転、または移動できます。

• opacity -この属性は要素の透明度レベルを設定します。1 は完全に表示されることを意味し、0 は完全に透明であることを意味します。

• background-color -このプロパティは、要素の背景色を設定します。

• color -このプロパティは、要素のテキストの色を設定します。

• transition -このプロパティは、デフォルト状態とホバー状態などの 2 つの状態間のアニメーション効果を制御します。

• bottom および top - 属性は、コンテナを基準にして要素を配置します。

CSS を使用してボタン ホバー アニメーション効果を作成する

ボタン ホバー アニメーションは、Web サイトに視覚的な魅力を追加する優れた方法です。 CSS を使用してボタン ホバー アニメーション効果を作成するには、通常、:hover 疑似クラス セレクターを CSS トランジションまたはキーフレーム アニメーションと組み合わせて使用​​します。次の手順で、ボタンホバーアニメーション効果を簡単に作成できます。

• ステップ 1 - スティッキー ボール アニメーションの HTML コードを作成します

• ステップ 2 - ボタンに CSS スタイルを追加します

• ステップ 3 - ホバー アニメーション効果を追加します

この記事では、CSS でボタン ホバー アニメーション効果を作成する 3 つの例を説明します。

例 1 - カーソルを合わせてズームする

この例では、ボタンの背景は青、テキストは白になります。マウス ポインターがボタン上にあると、ボタンはスムーズな遷移での変換プロパティを使用して 0.5 秒以内に 20% 拡大され、背景色が緑色に変わります。

リーリー

例 2: マウスオーバーでフェードイン

この例では、ボタンの背景は青、テキストは白で、初期の不透明度は 0.5 です。マウス ポインタがボタン上にあると、不透明度は 0.5 秒でスムーズに 1 に移行します。

リーリー

例 3: マウスオーバーで上にスワイプ

この例では、ボタンの背景は青、テキストは白になり、位置は相対に設定されます。 Bottom プロパティは 0 に設定されており、ボタンがコンテナの下部にあることを意味します。マウス ポインターがボタン上にあると、bottom プロパティが 20 ピクセルに増加し、ボタンが 0.5 秒以内に滑らかに上にスライドします。

リーリー ＃＃＃結論は＃＃＃

ボタン ホバー アニメーション効果は、Web サイトに視覚的な魅力を追加する優れた方法です。 CSS を使用すると、Web サイトを目立たせるダイナミックで魅力的な効果を作成できます。ほんの数行のコードです。

以上がCSSを使用してボタンホバーアニメーション効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。