ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み込みアニメーションが使用されるか、プレースホルダーとしてスケルトン スクリーンが使用されます。読み込みアニメーションと比較すると、スケルトン スクリーン効果はより鮮明で実装が簡単です。シンプルなスケルトン スクリーンは CSS を使用して実装できます。 アイデア
骨組みを作ることから始めましょう スケルトン構造は非常にシンプルで、好きなブロックレベルの要素をいくつか配置するだけです。 <div class='スクリーンルート'> <ul> <li/> <li/> <li/> </ul> </div> ほら、とても簡単なんです。 CSS カラーリング よく見かけるスケルトンスクリーンはこんな感じです 説明を容易にし、コントラストを高めるために、まずゴーストバージョンを作成します まず、CSSの ラベル linear-gradient() は複数の色を使った線形グラデーション画像を作成できます。詳細については、こちらをご覧ください。 li{ 背景画像: 線形グラデーション(90度、#ff0000 25%、#41de6a 37%、#ff0000 63%); 幅: 100%; 高さ: 0.6rem; リストスタイル: なし; } 実際に使用する場合は、グラデーション画像を通常の色に置き換えます。例: 動かす 残っているのは、中央の緑色をアニメーション化するだけです それを動かす方法を何か思いつきますか? ここで使用されるのは、背景画像を引き伸ばし、背景配置のパーセンテージを動的に設定し、背景配置を変更し、コンテナに対する画像のさまざまなオフセット値を計算して、アニメーション効果を実現することです。 li{ 背景画像: 線形グラデーション(90度、#ff0000 25%、#41de6a 37%、#ff0000 63%); 幅: 100%; 高さ: 0.6rem; リストスタイル: なし; 背景サイズ: 400% 100%; 背景位置: 100% 50%; アニメーション: スケルトンのロード 1.4 秒、緩和時間無限; } @keyframes スケルトン読み込み { 0% { 背景位置: 100% 50%; } 100% { 背景位置: 0 50%; } } ここでは、 パーセンテージを使用して 学生の中には、 background-size にさまざまな値を設定してみて、その動作を観察し、なぜそうなるのか考えてみましょう。 最後に、キーフレームアニメーションを使用して、x座標の @keyframes スケルトン読み込み { 0% { 背景位置: 100% 50%; } 100% { 背景位置: 0 50%; } } コンテナの幅が (100px-400px)*100% = -300px 最後のフレームの実際のオフセット (100px-400px)*0% = 0 アニメーション プロセスは、実際には、コンテナーの幅の 3 倍の線形背景イメージのプロセスであり、コンテナーに対するオフセットは 要約する CSS で Skeleton Screen を実装する方法についての記事はこれで終わりです。CSS で Skeleton Screen を実装する方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例
エラーメッセージ:制御プロセスがエラー コードで終了したため、mysqld.service のジョブ...
目次1. はじめに2. アイデアファイルをアップロードする2つの方法3. ライフサイクル4. コード...
序文フェイルオーバーが発生した後、よくある問題は同期エラーです。データベースが小さい場合は、ダンプし...
1. サーバー ホストをクリックし、右側の操作リストで [仮想スイッチ管理] をクリックして、仮想...
リバースプロキシリバースプロキシとは、プロキシサーバーを介してユーザーのアクセス要求を受信し、ユーザ...
HTML ページでは、ボタンやテキスト ボックスなどの視覚要素にフォーカスを設定したり、フォーカスを...
この記事では、オブジェクト パラメータをインスタンス化して MySQL でデータをクエリする方法を紹...
これまで使用していたイメージはすべて DockerHub パブリック リポジトリから取得していました...
設計意図ページを開発する際には、ページ上のナビゲーション メニューをクリックしたときにページを対応す...
最初にサーバー上に FTP サーバーをセットアップし始めたとき、接続できないことがわかったので、Fi...
目次イベントページの読み込みイベント委任イベントの切り替えイベント要約するイベントページの読み込み1...
目次概要機能性と読みやすさ空白括弧セミコロンインデント身元大文字と小文字を区別予約キーワード概要すべ...
今日は、企業の実際の本番環境でよく遭遇する、Nginx を新しいバージョンにアップグレードし、古いバ...
序文JavaScript は、キーワードを使用してプライベート変数を宣言できる他の言語とは異なります...
さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...