私は通常、大手ウェブサイトの特別ページや製品リリースページを訪問するのが好きです。なぜなら、たくさんのクールなページエフェクトを見ることができるからです。この事例の素材は百度ブラウザのリリースページから来ており、次の事例「カメレオンアニメーション」も百度ブラウザから来ています。私は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 のさまざまな使用法の詳細な説明
背景要件: ERP システムに「ボタン権限制御」機能を追加する必要があり、権限の制御粒度をボタン レ...
概要データベースでは、ツリー ディレクトリと同様に、インデックスを使用してデータ検索を高速化します。...
1. ワニスの紹介Varnish は、高性能なオープンソースのリバースプロキシサーバーおよび HTT...
MySQL では、テーブル名の大文字と小文字の区別の問題が発生する可能性があります。実際、これはプラ...
目次1. 親コンポーネントが子コンポーネントにデータを渡す1.1. 親コンポーネントコード1.2. ...
この記事の例では、アップロード画像コントロールを実装するためのjsの具体的なコードを参考までに共有し...
目次前提条件RNはiOSに価値を渡す方法1: ネイティブに値を通常通り渡す方法2: コールバック関数...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
Supervisor は非常に優れたデーモン管理ツールです。自動起動、ログ出力、自動ログカットなど、...
サブクエリの代わりにJOINを使用するMySQL はバージョン 4.1 以降で SQL サブクエリを...
事前に書いておきます:次の手順では、ターミナルにコマンドを入力する必要があります。コンピューターでブ...
目次ウェブ開発1. Web開発の概要Tomcatのインストールと設定Tomcatをインストールする2...
目次1. 計画タスクをカスタマイズする2. 時間を同期する3. 練習する4. セキュリティの問題1....
従来の Linux イメージで作成された ECS クラウド サーバーには、NTP と YUM が設定...
プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...