CSS3で跳ねるボールのアニメーションを実現

CSS3で跳ねるボールのアニメーションを実現

私は通常、大手ウェブサイトの特別ページや製品リリースページを訪問するのが好きです。なぜなら、たくさんのクールなページエフェクトを見ることができるからです。この事例の素材は百度ブラウザのリリースページから来ており、次の事例「カメレオンアニメーション」も百度ブラウザから来ています。私はGoogle Chromeの忠実なユーザーですが、国内のインターネット業界の有名ブランドのウェブサイトの特集ページや製品リリースページは、どれもページの見た目をかっこよくするために全力を尽くしていると言わざるを得ません。

このケースのポイントは、ボールの跳ね返りのリズムとレイアウトの配置にあります。

1. ケース知識ポイント

1. 相対位置と絶対位置

2. 複数のアニメーションキュー

2. メインコード

1. HTMLコード

<div id="wrap">
    <div class="tu1"><img src="images/1.png" /></div>
    <div class="tu2"><img src="images/2.png" /></div>
    <div class="tu3"><img src="images/3.png" /></div>
</div>

2. コードのCSS部分

#包む{
	位置:絶対;
	左:0;
	右:0;
	トップ:0;
	下:0;
	幅:580ピクセル;
	高さ:143px;
	マージン:自動;
	}
#画像をラップする{
	幅:160ピクセル;
	}
#divをラップ{
	フロート:左;
	右マージン:50px;}
#div:最後の子{をラップします
	右マージン:0;}
.tu1、.tu2、.tu3{
	位置:絶対;
	残り:50%;
	左マージン:-80px;
	}
.tu1{
	zインデックス:1;
	アニメーション:tiantiao1 0.5s easy-in 1 前進、tiantiao2 0.2s easy-out 0.5s 1 前進、tiantiao3 0.2s easy-in 0.7s 1 前進、tiantiao4 0.15s easy-out 0.9s 1 前進、tiantiao5 0.15s easy-in 1.05s 1 前進、leftMove 0.4s easy-out 1.2s 1 前進、rotate 1s linear 1.6s infinite;
	}
.tu2{
	zインデックス:2;
	アニメーション:tiantiao1 0.5s easy-in 1 秒前、tiantiao2 0.2s easy-out 0.5s 1 秒前、tiantiao3 0.2s easy-in 0.7s 1 秒前、tiantiao4 0.15s easy-out 0.9s 1 秒前、tiantiao5 0.15s easy-in 1.05s 1 秒前、middle 0.4s easy-out 1.2s 1 秒前。
	}
.tu3{
	zインデックス:3;
	アニメーション:tiantiao1 0.5s easy-in 1 forwards、tiantiao2 0.2s easy-out 0.5s 1 forwards、tiantiao3 0.2s easy-in 0.7s 1 forwards、tiantiao4 0.15s easy-out 0.9s 1 forwards、tiantiao5 0.15s easy-in 1.05s 1 forwards、rightMove 0.4s easy-out 1.2s 1 forwards;
	}
@keyframes tiantiao1{
	0%{
		変換:translateY(-500px);
		}
	100%{
		変換:translateY(0);}
	}
@keyframes tiantiao2{
	0%{
		変換:translateY(0);}
	100%{
		変換:translateY(-100px);}}
@keyframes tiantiao3{
	0%{
		変換:translateY(-100px);}
	100%{
		変換:translateY(0);}}
@keyframes tiantiao4{
	0%{
		変換:translateY(0px);}
	100%{
		変換:translateY(-50px);}}
@keyframes tiantiao5{
	0%{
		変換:translateY(-50px);}
	100%{
		変換:translateY(0);}
		}
@keyframes 左へ移動{
	0%{
		変換:translateX(0);}
	100%{
		transform:translateX(-300px) スケール(1.6);
		
		}}
@keyframes 右へ移動{
	0%{
		変換:translateX(0);}
	100%{
		変換:translateX(300px) スケール(1.6);
		
		}}
@keyframes 中間{
	0%{
		変換:translateX(0);
		}
	100%{
		変換:translateX(0) スケール(1.6);
		
		}}

複数のキュー内のアニメーションの場合は、アニメーションの遅延に注意してください。次のキューのアニメーションは、前のキューのアニメーションが完了した後にのみ実行されます。

完全なページコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>ボールが次々と落ちていくアニメーション</title>
<スタイル タイプ="text/css">
本文、div、フッター、p{
	マージン:0;
	パディング:0;}
体{
	フォント:1em "マイクロソフト 弥平";
	背景色:#eee;}
#包む{
	位置:絶対;
	左:0;
	右:0;
	トップ:0;
	下:0;
	幅:580ピクセル;
	高さ:143px;
	マージン:自動;
	}
#画像をラップする{
	幅:160ピクセル;
	}
#divをラップ{
	フロート:左;
	右マージン:50px;}
#div:最後の子{をラップします
	右マージン:0;}
.tu1、.tu2、.tu3{
	位置:絶対;
	残り:50%;
	左マージン:-80px;
	}
.tu1{
	zインデックス:1;
	アニメーション:tiantiao1 0.5s easy-in 1 前進、tiantiao2 0.2s easy-out 0.5s 1 前進、tiantiao3 0.2s easy-in 0.7s 1 前進、tiantiao4 0.15s easy-out 0.9s 1 前進、tiantiao5 0.15s easy-in 1.05s 1 前進、leftMove 0.4s easy-out 1.2s 1 前進、rotate 1s linear 1.6s infinite;
	}
.tu2{
	zインデックス:2;
	アニメーション:tiantiao1 0.5s easy-in 1 秒前、tiantiao2 0.2s easy-out 0.5s 1 秒前、tiantiao3 0.2s easy-in 0.7s 1 秒前、tiantiao4 0.15s easy-out 0.9s 1 秒前、tiantiao5 0.15s easy-in 1.05s 1 秒前、middle 0.4s easy-out 1.2s 1 秒前。
	}
.tu3{
	zインデックス:3;
	アニメーション:tiantiao1 0.5s easy-in 1 forwards、tiantiao2 0.2s easy-out 0.5s 1 forwards、tiantiao3 0.2s easy-in 0.7s 1 forwards、tiantiao4 0.15s easy-out 0.9s 1 forwards、tiantiao5 0.15s easy-in 1.05s 1 forwards、rightMove 0.4s easy-out 1.2s 1 forwards;}
フッター{
	位置:絶対;
	下:20px;
	残り:50%;
	左マージン:-104px;
	}
フッター
	テキスト配置:中央;
	マージン下部:.7em;}
フッターa{
	色:#666;
	テキスト装飾:なし;}
フッター a:hover{
	カラー:#333;}

@keyframes tiantiao1{
	0%{
		変換:translateY(-500px);
		}
	100%{
		変換:translateY(0);}
	}
@keyframes tiantiao2{
	0%{
		変換:translateY(0);}
	100%{
		変換:translateY(-100px);}}
@keyframes tiantiao3{
	0%{
		変換:translateY(-100px);}
	100%{
		変換:translateY(0);}}
@keyframes tiantiao4{
	0%{
		変換:translateY(0px);}
	100%{
		変換:translateY(-50px);}}
@keyframes tiantiao5{
	0%{
		変換:translateY(-50px);}
	100%{
		変換:translateY(0);}
		}
@keyframes 左へ移動{
	0%{
		変換:translateX(0);}
	100%{
		transform:translateX(-300px) スケール(1.6);
		
		}}
@keyframes 右へ移動{
	0%{
		変換:translateX(0);}
	100%{
		変換:translateX(300px) スケール(1.6);
		
		}}
@keyframes 中間{
	0%{
		変換:translateX(0);
		}
	100%{
		変換:translateX(0) スケール(1.6);
		
		}}

</スタイル>
</head>

<本文>
<div id="wrap">
	<div class="tu1"><img src="images/1.png" /></div>
    <div class="tu2"><img src="images/2.png" /></div>
    <div class="tu3"><img src="images/3.png" /></div>
</div>
<フッター>
     <p>123WORDPRESS.COM</p>
     <p><a href="https://www.jb51.net" target="_blank">www.jb51.net</a></p>
</フッター>
</本文>
</html>

上記は、CSS3 で弾むボールアニメーションを実装する方法の詳細です。CSS3 で弾むボールアニメーションを実装する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<:  ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

>>:  nginx における proxy_pass のさまざまな使用法の詳細な説明

推薦する

インデックスを使用して MySQL ORDER BY ステートメントを最適化する方法

テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...

Docker データボリュームの一般的な操作コードの例

開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...

MySQLは適切なストレージエンジンを選択します

データベースに関して最もよく聞かれる質問の 1 つは、現在のビジネス ニーズを満たす MySQL の...

MySQL 無料インストール版 (zip) のインストールと設定の詳細なチュートリアル

この記事では、MySQL無料インストール版(zip)のインストールと設定のチュートリアルを参考までに...

フロントエンドとバックエンド分離プロジェクトのDockerデプロイメントの実装例

目次1. 環境整備2. イメージを実行する問題を解決するRedis のインストールNginx のイン...

node.jsのコアモジュールとは

目次グローバルオブジェクトグローバルオブジェクトとグローバル変数プロセスコンソール一般的なツールユー...

MySQL マスタースレーブステータスチェックの実装

1. AデータベースとBデータベースの同期ステータスを確認する次のコマンドを入力すると多くの情報が表...

MySQLデータベースのトランザクションとロックの詳細な分析

目次1. 基本概念酸3.自動コミット4. トランザクション分離レベル5. 同時実行の一貫性の問題6....

jQuery の CSS スタイル属性 css() と width() の完全ガイド

目次1. css() の基本的な使用法: 1.1 CSSプロパティを取得する1.2 CSSプロパティ...

フロントエンド HTML+CSS+JS を使用してシンプルな TODOLIST 関数を開発する (メモ帳)

目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...

Ubuntu 20.04にSogou入力方式をインストールする詳細な手順

1. Fcitx入力フレームワークをインストールする関連する依存ライブラリとフレームワークは自動的に...

CentOS 7 環境でソースコードから MySQL 5.7 をインストールする方法

この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...

Linux で NFS ファイル共有サーバーを構築するための詳細な手順

Linux が NFS サーバーを構築異なるオペレーティング システム間でデータを共有するために、通...

要素の幅(高さ)の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...

個人履歴書を作成するための HTML の簡単な実装

履歴書コード: XML/HTML コードコンテンツをクリップボードにコピー<!DOCTYPE ...