テーマ 今日は、CSS3 を使用して円形スクロール プログレス バー アニメーションを作成する方法を説明します。簡単に習得できます。それで、それは正確には何ですか?心配しないでください。以前、CSS でプログレスバー効果を実現する方法についてのブログ「CSS でプログレスバーと順序プログレスバーを実現する」を共有しましたが、そのブログでは効果のみが生成され、アニメーション効果はありませんでした。当時は期末試験の復習中だったので、アニメーションを作成する時間コストを節約しました。さあ、今日も一緒にいろんな効果を実感してみましょう! コンテンツ まずはレンダリングを見て、学習への興味を高めましょう。 さて、この図に沿って上から下まで説明していきます。1番目と2番目の効果はブログ「CSSプログレスバーとオーダープログレスバー」で紹介しているので、ここではアニメーションに焦点を当てます。円形効果がポイントなので、詳しく説明します。 最初の効果: HTML構造: <div id="進捗"> <span></span> </div> CSS スタイル: #進捗{ 幅: 50%; 高さ: 30px; 境界線:1px実線 #ccc; 境界線の半径: 15px; マージン: 50px 0 0 100px; オーバーフロー: 非表示; ボックスシャドウ: 0 0 5px 0px #ddd インセット; } #進捗状況スパン{ 表示: インラインブロック; 幅: 100%; 高さ: 100%; background: #2989d8; /* 古いブラウザ */ 背景: -moz-linear-gradient(45度, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */ 背景: -webkit-gradient(linear, 左下, 右上, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome、Safari4+ */ 背景: -webkit-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Chrome 10+、Safari 5.1+ */ 背景: -o-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* Opera 11.10+ */ 背景: -ms-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* IE10+ */ 背景: linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* W3C */ フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* 水平グラデーションの IE6-9 フォールバック */ 背景サイズ: 60px 30px; テキスト配置: 中央; 色:#fff; -webkit-animation:load 3s イーズイン; } @-webkit-keyframes ロード{ 0%{ 幅: 0%; } 100%{ 幅:100%; } } こうしたプログレス バー アニメーションは、実際には最も簡単に実装できることがわかります。アニメーションでは、特定の進行状況パーセンテージに応じて、デフォルトの幅パーセンテージと幅パーセンテージを 100% に設定するだけです。たとえば、70% のプログレス バー アニメーション効果を実現したい場合は、次の 2 か所を変更するだけで済みます。 #進捗状況スパン{ 幅: 70%; } @-webkit-keyframes ロード{ 0%{ 幅: 0%; } 100%{ 幅:70%; } } 2番目の効果: HTML構造: <div id="プログレスバー"> <!-- 進捗状況バー --> <div> <span></span> </div> <!-- 5 つの円 --> <span></span> <span></span> <span></span> <span></span> <span></span> </div> CSS スタイル: #プログレスバー{ 幅: 80%; 高さ: 50px; 位置: 相対的; マージン: 50px 0 0 100px; } #プログレスバー div{ 幅: 100%; 高さ: 10px; 位置: 絶対; 上位:50%; 左: 0; 上マージン:-20px; 背景: #ccc; } #progressBar div span { 位置: 絶対; 表示: インラインブロック; 背景: 緑; 高さ: 10px; 幅: 100%; -webkit-animation:bgLoad 5.5秒リニア; } @-webkit-keyframes bgLoad{ 0%{ 幅: 0%; } 18.18%、27.27%{ 幅:25%; } 45.45%、54.54%{ 幅: 50%; } 72.72%、81.81%{ 幅: 75%; } 100%{ 幅:100%; } } #プログレスバー>span{ 位置: 絶対; トップ:0; 上マージン: -10px; 幅: 40px; 高さ: 40px; 境界線の半径: 50%; 背景: #ccc; 左マージン: -20px; 色:#fff; } @-webkit-keyframes サークルロード_1{ 0%,66.66%{ 背景: #ccc; } 100%{ 背景:緑; } } @-webkit-keyframes サークルロード_2{ 0%,83.34%{ 背景: #ccc; } 100%{ 背景:緑; } } @-webkit-keyframes サークルロード_3{ 0%,88.88%{ 背景: #ccc; } 100%{ 背景:緑; } } @-webkit-keyframes サークルロード_4{ 0%,91.67%{ 背景: #ccc; } 100%{ 背景:緑; } } #プログレスバー span:nth-child(2){ 左: 0%;背景:緑; } #プログレスバー span:nth-child(3){ 左: 25%;背景:緑; -webkit-animation:circleLoad_1 1.5秒のイーズイン; } #プログレスバー span:nth-child(4){ 左: 50%;背景:緑; -webkit-animation:circleLoad_2 3秒のイーズイン; } #プログレスバー span:nth-child(5){ 左: 75%;背景:緑; -webkit-animation:circleLoad_3 4.5秒のイーズイン; } #プログレスバー span:nth-child(6){ 左: 100%;背景:緑; -webkit-animation:circleLoad_4 6秒のイーズイン; } ご覧のとおり、アニメーション自体は実は非常にシンプルで理解しやすいものです。主にアニメーションの継続時間の計算を行います。このアニメーション効果は 1 回しか実行されないため、アニメーションの遅延時間を使用して、各アニメーションが指定された時点で開始されるようにすることができます。ただし、ループまたは複数のアニメーション効果の場合、遅延は柔軟ではないため、ここでは継続時間を使用してアニメーションの実行時間を制御します。 この注文進捗状況バーでは、セクションを移動するのに 1 秒かかり、各ドットで 0.5 秒間停止するように設定しました。この 0.5 秒は、対応するドットのアニメーションの継続時間です。しかし、これは単一のアニメーションであることを再度強調する必要があります。ループアニメーションを実装する場合は、調整が必要です。すべてのアニメーションの継続時間は同じである必要があります。そうでないと、ループが乱雑になります。時間の変更は、アニメーション キーフレームの変更にも影響します。以下は、最初のセグメントと 2 番目の円のアニメーション時間の説明です。 まず、細いストリップのアニメーションの継続時間は次のように計算されます。 4 つのセグメント x 1 秒 + 中央の 3 つのドット x 0.5 秒 = 5.5 秒 次のステップは、細長いストリップアニメーションのキーフレームの時間配分を計算することです。各部分が 0.5 秒であると仮定すると、合計 11 の部分があり、各小セグメントに 2 つの部分、各ドットに 1 つの部分があります。100% を 11 で割ると、各部分が約 9.09% であることがわかります。次のステップは時間を割り当てることですが、これは簡単なので、これについてはあまり説明しません。 次に、細いストリップがアニメーション効果の最初のセグメントを完了して 2 番目のドットに到達すると、0.5 秒間一時停止します。この 0.5 秒が 2 番目のドットのアニメーション時間であるため、2 番目のドットのアニメーションの継続時間は次のようになります。 ストリップの実行が完了するまで待機します。1 セグメント x 1 秒 + 独自のアニメーション完了時間 x 0.5 秒 = 1.5 秒 同じ方法を使用して、各部分の時間を計算し、割り当てます。他のアニメーション効果も同様であり、ここでは詳しく説明しません。 3番目の効果: 今日はこの効果に焦点を当てます。まず、円形のプログレス バー効果を作成できるかと尋ねられた場合、それが静的な完全な円形のプログレス バーであれば、非常に簡単です。 .circleprogress{ 幅: 160ピクセル; 高さ: 160px; border:20px 赤一色; 境界線の半径: 50%; } .circleprogress{ 幅: 160ピクセル; 高さ: 160px; border:20px 赤一色; border-left:20px 透明、実線; border-bottom:20px 透明; 境界線の半径: 50%; } それでも私は、これは難しいことではないと言うでしょう。しかし、それらが正確に 45 度の倍数ではない場合はどうなるでしょうか? まず 200 x 200 の正方形を設定し、その中でエフェクトを完成させます。 .circleProgress_wrapper{ 幅: 200ピクセル; 高さ: 200px; マージン: 50px 自動; 位置: 相対的; 境界線:1px実線 #ddd; } 次に、このコンテナーにさらに 2 つの長方形を配置します。各長方形はスペースの半分を占めます。 <div class="circleProgress_wrapper"> <div class="ラッパー右"> <div class="circleProgress rightcircle"></div> </div> <div class="ラッパー左"> <div class="circleProgress leftcircle"></div> </div> </div> .ラッパー{ 幅: 100ピクセル; 高さ: 200px; 位置: 絶対; トップ:0; オーバーフロー: 非表示; } 。右{ 右:0; } 。左{ 左:0; } ここで、.wrapper の overflow:hidden; が重要な役割を果たすことを強調したいと思います。両方の四角形にオーバーフロー非表示が設定されているため、四角形内の円を回転させると、オーバーフロー部分が非表示になり、目的の効果が得られます。 HTML 構造からわかるように、左と右の長方形の内側にはそれぞれ円があります。まずは右の半円について説明しましょう。 .circle進捗状況{ 幅: 160ピクセル; 高さ: 160ピクセル; border:20px 透明実線; 境界線の半径: 50%; 位置: 絶対; トップ:0; } .rightcircle{ border-top:20px 緑一色; border-right:20px 緑一色; 右:0; } ご覧の通り、効果が出ています。実は元々半円弧だったのですが、上枠と右枠を設定したため上枠の半分がはみ出して隠れてしまっていたので、回転させることによって復元できます。 .circle進捗状況{ 幅: 160ピクセル; 高さ: 160px; border:20px 透明実線; 境界線の半径: 50%; 位置: 絶対; トップ:0; -webkit-transform: 回転(45度)。 } したがって、希望する角度に回転するだけで、任意の比率のプログレス バーを実現できます。次に、左半分の円弧を実装して完全な円にします。 .leftcircle{ border-bottom:20px 緑一色; border-left:20px 緑一色; 左:0; } 次に、これを動かします。原理としては、まず右の半円弧を 180 度回転させ、次に左の半円弧を 180 度回転させます。こうすると、2 つの半円が次々に溢れて消え、プログレス バーが再び回転しているように見えます。 .rightcircle{ border-top:20px 緑一色; border-right:20px 緑一色; 右:0; -webkit-animation:circleProgressLoad_right 5秒線形無限; } .leftcircle{ border-bottom:20px 緑一色; border-left:20px 緑一色; 左:0; -webkit-animation:circleProgressLoad_left 5s 線形無限; } @-webkit-keyframes サークルProgressLoad_right{ 0%{ -webkit-transform: 回転(45度)。 } 50%,100%{ -webkit-transform: 回転(225度)。 } } @-webkit-keyframes サークルProgressLoad_left{ 0%,50%{ -webkit-transform: 回転(45度)。 } 100%{ -webkit-transform: 回転(225度)。 } } もちろん、逆の効果を得るには角度を調整するだけです。 .circle進捗状況{ 幅: 160ピクセル; 高さ: 160px; border:20px 透明実線; 境界線の半径: 50%; 位置: 絶対; トップ:0; -webkit-transform: 回転(-135度); } @-webkit-keyframes サークルProgressLoad_right{ 0%{ -webkit-transform: 回転(-135度); } 50%,100%{ -webkit-transform: 回転(45度)。 } } @-webkit-keyframes サークルProgressLoad_left{ 0%,50%{ -webkit-transform: 回転(-135度); } 100%{ -webkit-transform: 回転(45度)。 } } さて、次のステップは最終的な効果を得ることです。冒頭で見たように、これは 360 Guard を使用してゴミをクリーンアップしたときの効果に少し似ていますが、もちろんあまり似ていません。 .circleProgress_wrapper{ 幅: 200ピクセル; 高さ: 200px; マージン: 50px 自動; 位置: 相対的; 境界線:1px実線 #ddd; } .ラッパー{ 幅: 100ピクセル; 高さ: 200px; 位置: 絶対; トップ:0; オーバーフロー: 非表示; } 。右{ 右:0; } 。左{ 左:0; } .circle進捗状況{ 幅: 160ピクセル; 高さ: 160px; 境界線:20px実線rgb(232, 232, 12); 境界線の半径: 50%; 位置: 絶対; トップ:0; -webkit-transform: 回転(45度)。 } .rightcircle{ border-top:20px 緑一色; border-right:20px 緑一色; 右:0; -webkit-animation:circleProgressLoad_right 5秒線形無限; } .leftcircle{ border-bottom:20px 緑一色; border-left:20px 緑一色; 左:0; -webkit-animation:circleProgressLoad_left 5s linear infinite; } @-webkit-keyframes サークルProgressLoad_right{ 0%{ 上境界線:20px 実線 #ED1A1A; 右ボーダー:20px 実線 #ED1A1A; -webkit-transform: 回転(45度)。 } 50%{ 上境界線:20px 実線 rgb(232, 232, 12); 右境界線:20px 実線 rgb(232, 232, 12); 左境界線:20px 実線 rgb(81, 197, 81); ボーダー下部:20px ソリッド rgb(81, 197, 81); -webkit-transform: 回転(225度)。 } 100%{ border-left:20px 緑一色; border-bottom:20px 緑一色; -webkit-transform: 回転(225度)。 } } @-webkit-keyframes サークルProgressLoad_left{ 0%{ ボーダー下部:20px 実線 #ED1A1A; 左ボーダー:20px 実線 #ED1A1A; -webkit-transform: 回転(45度)。 } 50%{ ボーダー下部:20px ソリッド rgb(232, 232, 12); 左境界線:20px 実線 rgb(232, 232, 12); 上境界線:20px 実線 rgb(81, 197, 81); 右ボーダー:20px 実線 rgb(81, 197, 81); -webkit-transform: 回転(45度)。 } 100%{ border-top:20px 緑一色; border-right:20px 緑一色; border-bottom:20px 緑一色; border-left:20px 緑一色; -webkit-transform: 回転(225度)。 } } ご覧のとおり、さまざまな境界線の色を変更するアニメーションがいくつかあります。自分で練習することができます。主な方法は、2 つの長方形を使用して、このような円形のプログレス バー効果を完成させることです。重要な役割を果たすオーバーフロー ルールに特に注意してください。
以上がCSS3を使用して円形スクロールプログレスバーアニメーションを作成する例の詳細です。CSS3プログレスバーの制作の詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。 |
<<: Linux環境にJDKとTomcatをインストールする詳細な手順
>>: フロントエンド開発に必須:推奨されるブラウザ互換性テストツール 12 選
この記事では、ES6 の for ... of ループについて説明します。古い方法以前は、JavaS...
序文Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js の...
目次1. スタックの定義2. JSスタックの調査1. スタックとヒープ2. 基本型と参照型3. 値渡...
CSS のみを使用してどのような充電アニメーション効果を作成できるかを見てみましょう。バッテリーを...
1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...
通常、Web サイトを構築する目的は、検索エンジンにインデックス登録してもらい、プロモーションを拡大...
目次序文TypeScript の列挙型とは何ですか? TypeScriptで列挙型を使用する際に注意...
Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...
コマンドラインでMYSQLに正常にログインでき、NavicatもMySQLに正常に接続できますが、I...
目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...
今日、問題が発生しました。クエリ バーのドロップダウン ボックスの内容が長すぎて、一部が隠れてしまっ...
私がデザインした最初の Web ページは次のとおりです。 私はこの業界に7年間在籍し、プログラミング...
目次序文1. forループ2. whileループとdo-whileループ3. forEach、map...
目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...
オープンソース データベース アーキテクチャの設計原則01. 技術の選択最も使い慣れていて、最大限に...