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