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 つのパラメータの分析
最近、自宅サーバーにクラウドディスクを導入する予定なので、一連の環境構築作業を始めました。MySQL...
目次例示する1. ブロブオブジェクト2. フロントエンド3. バックエンド要約する例示する最近、ファ...
Redux はデータ状態管理プラグインです。React や Vue を使用してコンポーネント化された...
この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...
Linux で Go 環境を構築するのは非常に簡単です。 1. go1.2.1.linux-386....
1. MySQLをインストールする(1)ダウンロードしたMySQLの圧縮ファイルをMySQLをインス...
今夜の夕食後にノートパソコンの電源を入れたところ、問題が発生しました。通常、コンピューターがスリープ...
1. Concat関数。よく使用される接続文字列: concat 関数。たとえば、SQLクエリ条件...
ここで 123WORDPRESS.COM はこれらのテンプレートの最初の部分を紹介します。各テンプレ...
序文MySQL データベース ロックは、データの一貫性を実現し、同時実行性の問題を解決するための重要...
1. はじめに:ウェブページにフラッシュ コンテンツを正常に表示したい場合は、ページ上のフラッシュ ...
序文システムにファイル システムを作成し、それを永続的または非永続的にマウントする方法を学習します。...
上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...
1. データを初期化する `test_01` が存在する場合はテーブルを削除します。 テーブル「te...
今日は、サイトの設定やウェブサイトのアップロードなど、FlashFXP の最も基本的な機能を紹介しま...