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 のさまざまな使用法の詳細な説明

推薦する

Vue ベースの要素ボタン権限実装ソリューション

背景要件: ERP システムに「ボタン権限制御」機能を追加する必要があり、権限の制御粒度をボタン レ...

MySQL 学習 (VII): Innodb ストレージ エンジン インデックスの実装原理の詳細説明

概要データベースでは、ツリー ディレクトリと同様に、インデックスを使用してデータ検索を高速化します。...

CentOS 7.5 が Varnish キャッシュサーバー機能を導入

1. ワニスの紹介Varnish は、高性能なオープンソースのリバースプロキシサーバーおよび HTT...

MySQL における識別子の大文字と小文字の区別の問題の詳細な分析

MySQL では、テーブル名の大文字と小文字の区別の問題が発生する可能性があります。実際、これはプラ...

Reactの親コンポーネントと子コンポーネント間のデータ転送の詳細な説明

目次1. 親コンポーネントが子コンポーネントにデータを渡す1.1. 親コンポーネントコード1.2. ...

アップロード画像コントロールを実現するネイティブ js

この記事の例では、アップロード画像コントロールを実装するためのjsの具体的なコードを参考までに共有し...

React NativeとiOSの相互作用の詳細な説明

目次前提条件RNはiOSに価値を渡す方法1: ネイティブに値を通常通り渡す方法2: コールバック関数...

フォーム要素の垂直方向の中央揃えに最適なソリューション

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

Linux でのプロセスデーモン スーパーバイザーのインストール、構成、および使用

Supervisor は非常に優れたデーモン管理ツールです。自動起動、ログ出力、自動ログカットなど、...

MySQL の最適化: サブクエリの代わりに結合を使用する

サブクエリの代わりにJOINを使用するMySQL はバージョン 4.1 以降で SQL サブクエリを...

Ubuntu 18.04はルート権限を取得し、ルートユーザーとしてログインします

事前に書いておきます:次の手順では、ターミナルにコマンドを入力する必要があります。コンピューターでブ...

IDEA を使用して Web プロジェクトを作成し、Tomcat に公開する方法

目次ウェブ開発1. Web開発の概要Tomcatのインストールと設定Tomcatをインストールする2...

Linux システムでのスケジュールされたタスクの紹介

目次1. 計画タスクをカスタマイズする2. 時間を同期する3. 練習する4. セキュリティの問題1....

歴史的な Linux 画像処理および修復ソリューション

従来の Linux イメージで作成された ECS クラウド サーバーには、NTP と YUM が設定...

MySQL テーブルにはどのくらいの量のデータを保存できますか?

プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...