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

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

推薦する

Dockerコンテナでの静的ウェブサイトレイアウトの実装

サーバーの配置数日間無料で使用できるクラウドサーバー(Alibaba Cloud、Huawei Cl...

XHTML の一般的なタグ

XHTML タグとは何ですか? XHTML タグ要素は、XHTML ドキュメントの基本的なコンポーネ...

Dockerイメージ内のnoneイメージ操作を削除する

普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...

大量のデータをMySQLにインポートする際に発生する問題と解決策の分析

プロジェクトでは、SQL を使用してデータ分析を実行するために、大量のデータをデータベースにインポー...

MySQLデータベース設計:Pythonを使ったスキーマ操作方法の詳しい解説

矢が放たれる前に、弓は矢にささやきました。「お前の自由は私のものだ。」スキーマは矢のようなもので、弓...

JS配列インデックス検出におけるデータ型の問題の詳細な説明

WeChat アプレット プロジェクトを書いていたとき、その中に「都市選択」機能がありました。作者は...

CentOS 7にDockerをインストールする

Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....

MySQL 5.7 における基本的な JSON 操作ガイド

序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...

HTMLのテーブルタグの基本学習チュートリアル

表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...

HTML でフォントの色を設定する方法と、PS を使用して HTML で正確なフォントの色を取得する方法

1. HTMLフォントカラー設定HTML では、フォント タグを使用してフォント コンテンツの色を設...

jsを使用してカルーセル効果を実現する

今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...

tomcat をインストールし、Linux で Web サイトを展開します (推奨)

jdk をインストールします: Oracle 公式ダウンロード https://www.oracl...

MySQLでMyISAMストレージエンジンをInnodbに変更した操作記録のまとめ

一般的に、MySQL はデフォルトでさまざまなストレージ エンジンを提供しており、次のように表示され...

CSS で水平方向と垂直方向に中央揃えする 10 の方法を教えます (要約)

面接には必需品、仕事でも必ず使います。うーん、誰でも分かるでしょう。これ以上何も言わずに、要約とレン...

IE のテキストモード! DOCTYPE の役割の紹介

前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...