基本的な準備 この実装には、クラス名が ball である単純な div が必要です。 HTMLコード: <div class="ボール"></div> Flexbox レイアウトを使用して、ボールをページの中央に配置します。サイズは 100px × 100px、背景色はオレンジです。 CSSコード: 体 { display: flex; /* Flexレイアウトを使用する */ justify-content: center; /* 水平方向の中央 */ } 。ボール { 幅: 100ピクセル; 高さ: 100px; border-radius: 50%; /* 正方形を円に変更します */ background-color: #FF5722; /* 色をオレンジ色に設定します */ } キーフレームの作成 キーフレームは CSS アニメーションで使用されるため、アニメーションを完全に制御できます。キーフレーム スタイルの作成は非常に簡単です。キーワード @keyframes に続けてアニメーションの名前を使用します。 CSSコード: @keyframes アニメーション名 { /* コード */ } この例では、キーフレームに「bounce」という名前を付けます。 Keyframe では、from キーワードと to キーワードを使用して、アニメーションの開始点と終了点の CSS スタイルを指定します。 CSSコード: @keyframes バウンス { { /* 開始 */ } から { /* 終了 */ } まで } シンプルですよね? 最後のステップとして、開始点と終了点に CSS スタイルを追加します。バウンド効果を作成するには、ボールの位置を変更するだけです。 transform を使用すると、特定の要素の座標を変更できます。最終的なキーフレームは次のとおりです。 CSSコード: @keyframes バウンス { { transform: translate3d(0, 0, 0); } から を { transform: translate3d(0, 200px, 0); } に変更します。 } transform を使用して、ボールを 3 次元軸に沿って移動します。translate3D 関数には、(x、y、z) という 3 つの入力パラメータが必要です。 ボールを上下に跳ねさせたいので、y 軸に沿って移動させるだけで済みます。したがって、アニメーションの終了点(つまり、to のスタイル)の y 値は 200px になります。 キーフレームを実行 @keyframe が作成されたので、実際に使用してみましょう。 .ball{} css に戻り、次のコード行を追加します。 CSSコード: 。ボール { /* ... */ アニメーション: バウンス 0.5 秒; アニメーション方向: 代替; アニメーションの反復回数: 無限; } 次の 3 行のコードについて説明します。 キーフレーム ルールを使用して、ボール要素にバウンドするように指示します。 アニメーションが完了するまでの時間を 0.5 秒に設定します。 完了後は、アニメーションが逆方向(反転)に実行されます。 アニメーションを無制限に実行します。 これまでのところ素晴らしいです。 これは私たちが望んでいるものに近いですが、まだ完璧ではありません。 弾むボールのようには見えません。これは、アニメーションの速度カーブを設定していないため、デフォルトでイーズに設定されるからです。つまり、アニメーションはゆっくりと始まり、途中でスピードが上がり、終わり近くで再びスピードが下がります。残念ながら、これはバウンドするボールには理想的ではありません。幸いなことに、この速度曲線を Math を使用してカスタマイズできます。 あまり詳しく説明する必要はありませんが、ベジェ曲線を使用してカスタムアニメーションのタイミングを指定できます。添付のコードは次のとおりです。 CSSコード: 。ボール { /* ... */ アニメーション: バウンス 0.5 秒 cubic-bezier(.5,0.05,1,.5); } もちろん、これは CSS アニメーションとキーフレームを使用して作成された最も単純なアニメーション効果です。 要約する 上記は、CSS3 を使用して Web アニメーションを作成し、バウンドするボール効果を実現する方法について紹介したものです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
実際の開発では、MySQL の主キーは重複できず、主キーが自動的にインクリメントされることがあります...
今日から、定期的にちょっとした豆知識を整理していきます。簡単なものもあるかもしれませんが、どれも役に...
この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内...
js 配列はどこでも使用されているため、おそらく誰もがよく知っているでしょうが、配列クラス (疑似配...
今日、問題が発生しました: MySQL の insert into、update、delete ステ...
NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...
序文数日前、偶然、コーナーの四角形が欠落している機能に遭遇しました。最初に頭に浮かんだのは、必要な場...
innodb_flush_methodのいくつかの典型的な値 fsync: InnoDB は fs...
序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...
最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装...
コンテナのライフサイクルコンテナランタイムのライフサイクルコンテナは、分離特性を持つプロセスのセット...
このデータベース クエリ ステートメントは、インターネット上の 50 個のデータベース クエリ練習問...
ピクセル解決通常、モニター解像度と呼ばれるものは、実際にはモニターの物理的な解像度ではなく、デスクト...
新年の初めに、友人の健康と2013年が素晴らしい年となることを心からお祈りいたします。この記事では、...
私が初めてdockerを使用したときは、dockerfileやdocker-composeを使用して...