Web には一般的な読み込みアイコンが 2 つあります。1 つは iOS の「菊」、もう 1 つは Android の「リング」です。今日は SVG を使用して Android の「リング」アニメーションを実装し、次のクラスでは iOS の「菊」を実装します。 注: GIFのフレーム数が少ないため、実際のアニメーション効果は非常にスムーズです。 の。 xml(svg) <svg 幅="36" 高さ="36" ビューボックス="0 0 50 50" クラス="a-loading-android"> <circle cx="25" cy="25" r="20" fill="none"stroke="currentColor"stroke-width="5"></circle> </svg> まず、SVG キャンバスのサイズを50x50と定義し、ブラウザで36x36にズームします (この 36 は実際のニーズに合わせて調整できます)。リングの中心座標を25,25 、半径を 20 (円周は約 125 で、後で使用します) と定義します。色は、親要素の color 属性の値を取得するためにcurrentColorとし、リングの幅は 5 ピクセルとします。CSS を書く前に効果を見てみましょう。 SCSS .a-ロード中{ &-アンドロイド{ アニメーション: 2 秒の線形無限回転; 変換の原点: 中心 中心; >円{ 表示: インラインブロック; アニメーション: dash 1500ms easy-in-out infinite; stroke-linecap: round; // 終点は円です color: currentColor; } @keyframes 回転 { 100% { 変換: 回転(360度); } } @keyframes ダッシュ { 0% { ストロークダッシュ配列: 1, 200; } 50% { ストロークダッシュ配列: 100, 200; ストロークダッシュオフセット: -45; } 100% { ストロークダッシュ配列: 100, 200; ストロークダッシュオフセット: -124; } } } } ストロークダシャ配列 まず、破線を定義するために使用される リングも点線で表され、単位実線部分の長さがリングの円周内で変化するとしたら、これは実現できるのではないでしょうか(ハーフリング/フルリングなど)。以下は : 注: ここでの 値はリングの円周よりも大きい限り、破線間のギャップを表すように任意に定義されます。 ストローク-ダッシュオフセット オフセット。値が正の場合、破線は反時計回りに後退し、値が負の場合、時計回りに前進します (左の図のstroke-dashoffset:0 では、リングの開始点は 3 時の位置にあり、右の図で -10 に設定すると、リングの開始点は時計回りに距離だけオフセットされます)。 アニメーションでは、リングの長さが長くなり、尾の長さが短くなるため、 成し遂げる。 アニメーションにおける3つの重要な瞬間 0% 瞬間 アニメーションが 1 サイクル後に突然にならないように、リングに 1 つのポイントのみが表示されるようにします (効果を比較するには、0 に変更します)。 50% 瞬間 リングがリングの 80% 表示されるように、実線の長さを 100 (125*0.8、125 は円周) に設定し、 100%の瞬間 0% 状態と同じポイント状態に戻ると、アニメーション サイクルは急激にはなりませんが、50% から 100% までのアニメーションは単なる「末尾の収縮」になります。そのため、これを実現するために、 全体的なローテーション Android システムのアニメーションと一致させるために、ボディ全体も回転します。ここでのコードは比較的単純なので、繰り返しません。 アニメーションプロパティの拡張 CSS したがって、実際に上記のアニメーションを拡張して、回転と色の変更を同時に実行することができます。 &-アンドロイド{ アニメーション: 2 秒の線形無限回転; 変換の原点: 中心 中心; >円{ 表示: インラインブロック; // 色変更コードアニメーションを追加します: color 6s easy-in-out infinite、 dash 1.5s easy-in-out infinite; ストロークの線のサイズ: 丸い; 色: 現在の色; } @keyframes 回転 { 100% { 変換: 回転(360度); } } @keyframes ダッシュ { 0% { ストロークダッシュ配列: 1, 200; } 50% { ストロークダッシュ配列: 100, 200; ストロークダッシュオフセット: -45; } 100% { ストロークダッシュ配列: 100, 200; ストロークダッシュオフセット: -124; } } @キーフレームの色{ 0%、 100% { ストローク: #6b5c5b; } 40% { ストローク: #0057e7; } 66% { ストローク: #008744; } 80%、 90% { ストローク: #ffa700; } } } この記事のコードは、Vue フレームワークであるiviewを参照しています。 要約する 以上が、CSS を使用して Android システムの読み込みアニメーションを実装する方法についてご紹介したものです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: JavaScript の toLocaleString() での時間フォーマットに関する新しいアイデア
>>: MySQL レプリケーション問題の 3 つのパラメータの分析
居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...
目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...
導入dockerコンテナとdocker-composeに基づいて、Linux環境でのdockerの基...
ブラウザベンダーが標準を曲げて、ルールに従わないことをすると、問題や少なくとも混乱が生じる可能性があ...
目次序文システム環境現在のシステムパーティションレイアウトデータのバックアップレスキューモードに入る...
CentOS 8 がリリースされてから随分経ちました。Linux 仮想マシンをいじっている人間として...
1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...
1. 外部CSSファイルの基本スタイルをインポートする<link> タグを使用して外部ス...
結果: 実装コード: html <div class="buttons"&...
数秒後に広告が表示されて消えることがよくあります。この機能を実装するには、JQuery フレームワー...
<br />XHTML と CSS がオブジェクト指向だったらよかったのに。 。太陽は北...
私たちは Web 開発者として、プロの DBA ではありませんが、データベースなしではやっていけませ...
個人アカウントのパスワードを変更する一般ユーザーが個人アカウントのパスワードを変更する場合は、他のコ...
Git は vscode に統合されており、git コマンドをいくつか記述しなくても、クリックするだ...
目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...