私は通常、大手ウェブサイトの特別ページや製品リリースページを訪問するのが好きです。なぜなら、たくさんのクールなページエフェクトを見ることができるからです。この事例の素材は百度ブラウザのリリースページから来ており、次の事例「カメレオンアニメーション」も百度ブラウザから来ています。私は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 のさまざまな使用法の詳細な説明
テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...
開発者が Dockerfile を使用してイメージをビルドする場合は、イメージをビルドするときにデー...
データベースに関して最もよく聞かれる質問の 1 つは、現在のビジネス ニーズを満たす MySQL の...
この記事では、MySQL無料インストール版(zip)のインストールと設定のチュートリアルを参考までに...
目次1. 環境整備2. イメージを実行する問題を解決するRedis のインストールNginx のイン...
目次グローバルオブジェクトグローバルオブジェクトとグローバル変数プロセスコンソール一般的なツールユー...
1. AデータベースとBデータベースの同期ステータスを確認する次のコマンドを入力すると多くの情報が表...
目次1. 基本概念酸3.自動コミット4. トランザクション分離レベル5. 同時実行の一貫性の問題6....
目次1. css() の基本的な使用法: 1.1 CSSプロパティを取得する1.2 CSSプロパティ...
目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...
1. Fcitx入力フレームワークをインストールする関連する依存ライブラリとフレームワークは自動的に...
この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...
Linux が NFS サーバーを構築異なるオペレーティング システム間でデータを共有するために、通...
1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...
履歴書コード: XML/HTML コードコンテンツをクリップボードにコピー<!DOCTYPE ...