ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み込みアニメーションが使用されるか、プレースホルダーとしてスケルトン スクリーンが使用されます。読み込みアニメーションと比較すると、スケルトン スクリーン効果はより鮮明で実装が簡単です。シンプルなスケルトン スクリーンは 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 スクリプトを動的に読み込みます。例
オリジナル: http://developer.yahoo.com/performance/rule...
以下の質問はすべて InnoDB ストレージ エンジンに基づいています。 1. 最も大きな ID を...
CocosCreator バージョン: 2.3.4 Cocos には List コンポーネントがない...
システム環境: Redis バージョン: 6.0.8 Docker バージョン: 19.03.12シ...
crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...
目次機能紹介レンダリング1. ホームページレンダリング用のコード(index03) 2. ゲーム開始...
1. 冒頭の2つの単語みなさんこんにちは。私の名前はLin Zonglinです。私はテストエンジニア...
Vueボタンコンポーネントのカスタムカプセル化コードは参考用です。具体的な内容は次のとおりです。ボタ...
結果:実装コードhtml <div class='iphone'> &l...
<br />前のチュートリアル:Webデザインチュートリアル(2):模倣と盗作について。...
フロントエンドのデザイン案では、「X」や「>」の形をした閉じるボタンや、他の 3 方向の白抜き...
序文JavaScript では、document.querySelector("#demo...
[LeetCode] 182.重複メールPerson という名前のテーブル内のすべての重複メールを...
序文注: テストデータベースのバージョンはMySQL 8.0ですテーブルを作成し、ユーザー scot...
目次サーバー層でのフルテーブルスキャンの影響InnoDB におけるフルテーブルスキャンの影響Inno...