CSS3はグラフィックの落下アニメーション効果を実現します

CSS3はグラフィックの落下アニメーション効果を実現します

まずは効果を確認

実装コード

<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をデプロイする手順の紹介

>>:  フォーム内の無効なフォームフィールドの値を送信する方法 サンプルコード

推薦する

WeChatアプレットのスワイパードットのドットをスライダーに変更する方法

目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...

Linux システムで HugePages をすばやく構成するための完全な手順

序文Linux システムの HugePages と Oracle データベースの最適化については、関...

div要素に丸い境界線を追加する方法

以下のように表示されます。 CSSコードコンテンツをクリップボードにコピー分割{境界線: 2px 固...

新しいユーザーを作成し、MySQLに権限を付与する最も簡単な方法

ユーザーを作成します: 'oukele' によって識別されるユーザー 'ou...

モバイルでのHTML5経由のファイルアップロード

ほとんどの場合、PC でファイルをアップロードするにはプラグインが使用され、フラッシュが導入されても...

JS はランダム点呼システムを実装します

参考までに、JSを使用してランダム点呼システムを実装します。具体的な内容は次のとおりです。毎回の授業...

主軸上のFlex子要素の比率を制御する方法

背景フレックス レイアウトにより、配置とスペースの割り当てがより効果的に実現されます。最近、flex...

Dockerイメージのサイズを縮小する6つの方法

2017 年に Vulhub に取り組み始めてから、私は厄介な問題に悩まされてきました。Docker...

JSはクリックドロップ効果を実装します

jsはクリックとドロップの特殊効果を実現します。まずは効果画像を見てみましょうさっそく始めましょう。...

React HTML で react を使用する 2 つの方法

基本的な使い方 <!DOCTYPE html> <html lang="...

MySQL テーブル内の重複データを検索して削除する方法の概要

時々、データベース テーブルに重複したデータが大量に保存されます。これらの重複データはリソースを浪費...

nuxt.js 複数の環境変数の設定

目次1. はじめに2. シナリオ3. 環境を整える3.1 環境変数の挿入4. 最後に1. はじめに一...

JavaScript プロトタイプの詳細

目次1. 概要1.1 プロトタイプとは何ですか? 1.2 プロトタイプを入手する2. プロトタイプの...

上部の固定divは半透明効果に設定できます

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

仮想マシンの複製に関するVirtual Boxチュートリアル図

VMに慣れた後、BOXに切り替えるのは少し異なります。たとえば、コピーネットワークカードを2枚使って...