HTML と CSS を使用してホバー時にボタンを振る

このチュートリアルでは、HTML と CSS を使用して、ユーザーがホバーしたときにボタンを振る方法を学びます。シェイク ボタンを作成すると、アプリのユーザー エクスペリエンスがさらに魅力的になります。

CSS の「キーフレーム」ルールを使用して、HTML 要素を揺さぶるカスタム アニメーションを作成する必要があります。次に、カスタム キーフレームを「アニメーション」CSS プロパティの値として使用して、ユーザーがボタンの上にマウスを置いたときにボタンを振ることができます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って HTML と CSS を使用してホバー ボタンを振ることができます。

リーリー

上記の構文では、ボタンに揺れるアニメーションを追加するカスタム CSS ルールを作成しました。ユーザーは、「animation_time」を時間単位に置き換え、「repetition」を数値に置き換えてアニメーションを繰り返すことができます。

Example

の中国語訳は次のとおりです:

Example

以下の例では、ボタンを垂直に振ります。 「button」タグを使用して通常の HTML ボタンを作成し、「btn」クラス名を付けました。クラス名を使用してボタンにアクセスし、スタイルを設定します。

CSS では、「アニメーション」プロパティを使用して、ユーザーがボタンの上にマウスを置いたときにボタンに「シェイク」キーフレームを追加します。 Shake キーフレームでは、アニメーション時間の 0% でボタンを「0 度」、20% の時間で「5 度」、50% の時間で「0 度」、50% の時間で「0 度」回転します。アニメーション時間の % 時間回転ボタン「5 度」 70% の時間は「0 度」、100% の時間は「0 度」です。

出力では、ボタンが垂直方向に揺れているのがわかります。

リーリー

Example

の中国語訳は次のとおりです:

Example

以下の例では、HTML と CSS を使用してボタンを水平に振ります。

CSS プロパティ「transform:translateX()」を使用してボタンを水平に動かしました。まず、ボタンをマイナス方向に動かします。次に、ボタンを元の位置に移動します。次に、ボタンを正の方向に移動し、最後に CSS の「キーフレーム」ルールを使用してボタンを元の位置に移動します。 リーリー

Example

の中国語訳は次のとおりです:

Example

以下の例では、ボタンを水平方向と垂直方向に振る方法を学習します。 CSS の「transform」プロパティの値として「translateX()」を「rotate()」と組み合わせて使用​​します。

'translateX()' 関数はボタンを水平方向に移動し、'rotate()' 関数はボタンを垂直方向に移動します。出力では、ユーザーがボタンの上にマウスを置くと、ボタンが水平および垂直にわずかに移動することがわかります。ただし、ユーザーは「translateX()」関数のパラメータ値を増やして、水平方向のディザリングを増やすことができます。

リーリー

結論

このチュートリアルでは、ユーザーは CSS のみを使用して HTML ボタンをジッターする方法を学びました。最初の例では、ボタンを垂直に振る方法を学習しました。 2 番目の例では、ボタンを水平方向に振ることを学習し、最後の例では、ボタンを水平方向と垂直方向に振ることを学習しました。

以上がHTML と CSS を使用してホバー時にボタンを振るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。