画像やアイコンの上にマウスを移動して翻訳するにはどうすればよいですか?

Web 開発では、対話性が記憶に残るユーザー エクスペリエンスを提供するための鍵となります。一般的な手法は、画像またはアイコンの上にマウスを移動して、詳細情報を表示したり、外観を変更したりすることです。画像またはアイコンの上にマウスを移動して翻訳することは、Web サイトに動きと面白さを加える優れた方法です。

この記事では、ホバー時に画像またはアイコンを翻訳する方法を学びます。このタスクを達成するために、HTML と CSS のみを使用するさまざまな方法を学びます。

ホバー時に画像またはアイコンを翻訳するさまざまな方法

方法 1: CSS トランジション効果

ホバー時に画像またはアイコンを翻訳する最初の方法は、CSS トランジションを使用して実現されます。 CSS トランジションは、要素の上にマウスを置いたときなど、プロパティ値をスムーズに変更するために使用されます。トランジションを使用すると、アニメーションの長さと時間関数を指定できます。

＃＃＃文法＃＃＃

以下は、CSS トランジションを使用して画像またはアイコンを変換するための構文です。

リーリー ＃＃＃例＃＃＃

以下の例では、クラス名「trans-image」のイメージタグを使用します。 CSS セクションでは、トランジション プロパティを「transform」（持続時間 0.3 秒）に設定し、「ease-in-out」イージング関数を使用します。要素の上にマウスを移動すると、画像の場合は 30 ピクセル右に、アイコンの場合は 20 ピクセル右に変換するように、transform プロパティを設定します。

リーリー

方法 2: CSS アニメーション

ホバー時に画像またはアイコンを翻訳する最初の方法は、CSS アニメーションを使用することです。 CSS を使用すると、JavaScript や Flash を必要とせずに、HTML を使用して要素をアニメーション化できます。ここでは、CSS プロパティを必要なだけ、何度でも変更できます。

CSS アニメーションを使用するには、まずアニメーション用のキーフレームをいくつか指定する必要があります。キーフレームは、特定の時点での要素のスタイルを決定します。アニメーションを使用すると、トランジションよりも複雑でダイナミックな効果を作成できます。

＃＃＃文法＃＃＃

以下は、CSS アニメーションを使用して画像またはアイコンを変換するための構文です。

リーリー ＃＃＃例＃＃＃

次の例では、クラス「icon」の「i」タグとクラス「image」の タグを使用します。ここでは、表示属性を「inline-block」に設定します。また、アニメーション プロパティを「translate」、継続時間を 0.3 秒、イージング関数を「ease-in-out」に設定します。ここで、キーフレームを使用し、アニメーション名を「translate-hover」に設定してホバーするときに、アイコンと画像を右に 10 ピクセル移動し、その後のホバーでは右に 20 ピクセル移動します。

リーリー

方法 3: CSS グリッド

画像またはアイコンをホバー時に翻訳する最初の方法は、CSS グリッドを使用することです。 CSS グリッドは行と列を含むグリッドベースのレイアウト システムを使用するため、フロートや位置決めを使用せずに Web ページを簡単にデザインできます。ここでは、grid-row プロパティと Grid-column プロパティを使用してグリッド項目の位置を指定し、回転や変換などの CSS 変換プロパティを変換するグリッド項目に適用します。

＃＃＃文法＃＃＃

以下は、CSS グリッドを使用して画像またはアイコンを変換するための構文です。

リーリー ＃＃＃例＃＃＃

以下の例では、「container」クラスの「div」タグを定義しています。ここでは、CSSで表示プロパティを「grid」に設定し、3列3行のグリッドテンプレートを定義しています。画像とアイコンを変換するには、0.3 秒の継続時間で "変換" するトランジション プロパティと、ホバーしたときに画像を変換する "イーズインアウト" のイージング関数を使用しました。またはアイコンを 10 ピクセル右に移動します。

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

当社の Web サイトにインタラクティブ機能を追加すると、ユーザー エクスペリエンスが向上します。これを実現する 1 つの方法は、ホバー時に画像またはアイコンを翻訳することです。この効果は HTML と CSS を使用して実現できます。CSS トランジション、アニメーション、グリッドの使用など、さまざまな方法で実現できます。これらすべてのメソッドを使用すると、アニメーションの継続時間と時間関数を指定し、動的な効果を作成できます。これらのテクニックを活用することで、訪問者の印象に残る、より魅力的なウェブサイトを作成することができます。

以上が画像やアイコンの上にマウスを移動して翻訳するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。