まずは効果を確認 実装コード <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div> <div class="box box5"></div> <div class="box box6"></div> * { マージン: 0; パディング: 0; ボックスのサイズ: 境界線ボックス; } 体 { 幅: 100%; 高さ: 自動; 背景: #f90; オーバーフロー: 非表示; } 。箱 { 幅: 50px; 高さ: 50px; 背景: #f70; 変換: 回転(45度); 位置: 絶対; ボックスの影: 2px 2px 3px rgba(0, 0, 0, 0.3); } .box1 { 左: calc(50% - 25px); 上: calc(100% - 75px); アニメーション: box1 cubic-bezier(1, 0, 0.45, 1.4) 2s 1; } .box2 { 左: calc(50% - 65px); 上: calc(100% - 115px); アニメーション: box2 cubic-bezier(1, 0, 0.45, 1.4) 2.5s 1; } .box3 { 左: calc(50% + 15px); 上: calc(100% - 115px); アニメーション: box3 cubic-bezier(1, 0, 0.45, 1.4) 3s 1; } .box4 { 左: calc(50% + 55px); 上: calc(100% - 155px); アニメーション: box4 cubic-bezier(1, 0, 0.45, 1.4) 3.5s 1; } .box5 { 左: calc(50% - 105px); 上: calc(100% - 155px); アニメーション: box5 cubic-bezier(1, 0, 0.45, 1.4) 4s 1; } .box6 { 左: calc(50% - 25px); 上: calc(100% - 155px); アニメーション: box6 cubic-bezier(1, 0, 0.45, 1.4) 4.5s 1; } @キーフレームボックス1 { から { 上: -100px; } に { 上: calc(100% - 75px); } } @keyframes ボックス2 { から { 上: -100px; } に { 上: calc(100% - 115px); } } @キーフレームボックス3 { から { 上: -100px; } に { 上: calc(100% - 115px); } } @キーフレームボックス4 { から { 上: -100px; } に { 上: calc(100% - 155px); } } @keyframes ボックス5 { から { 上: -100px; } に { 上: calc(100% - 155px); } } @キーフレームボックス6 { から { 上: -100px; } に { 上: calc(100% - 155px); } } 上記は、CSS3 を使用して落下グラフィックのアニメーション効果を実現する方法の詳細です。CSS3 落下グラフィックの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 |
<<: DockerコンテナにRedisをデプロイする手順の紹介
>>: フォーム内の無効なフォームフィールドの値を送信する方法 サンプルコード
目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...
序文Linux システムの HugePages と Oracle データベースの最適化については、関...
以下のように表示されます。 CSSコードコンテンツをクリップボードにコピー分割{境界線: 2px 固...
ユーザーを作成します: 'oukele' によって識別されるユーザー 'ou...
ほとんどの場合、PC でファイルをアップロードするにはプラグインが使用され、フラッシュが導入されても...
参考までに、JSを使用してランダム点呼システムを実装します。具体的な内容は次のとおりです。毎回の授業...
背景フレックス レイアウトにより、配置とスペースの割り当てがより効果的に実現されます。最近、flex...
2017 年に Vulhub に取り組み始めてから、私は厄介な問題に悩まされてきました。Docker...
jsはクリックとドロップの特殊効果を実現します。まずは効果画像を見てみましょうさっそく始めましょう。...
基本的な使い方 <!DOCTYPE html> <html lang="...
時々、データベース テーブルに重複したデータが大量に保存されます。これらの重複データはリソースを浪費...
目次1. はじめに2. シナリオ3. 環境を整える3.1 環境変数の挿入4. 最後に1. はじめに一...
目次1. 概要1.1 プロトタイプとは何ですか? 1.2 プロトタイプを入手する2. プロトタイプの...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
VMに慣れた後、BOXに切り替えるのは少し異なります。たとえば、コピーネットワークカードを2枚使って...