CSSを使用して簡単なスケルトン画面を実装する-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSを使用して簡単なスケルトン画面を実装する

Guanhui

Jun 17, 2020 pm 05:08 PM

css

まえがき

ネットワークデータをロードする際、ユーザーエクスペリエンスを向上させるために、通常、円を描くローディングアニメーションやスケルトンスクリーンが使用されます。アニメーションのロードと比較して、スケルトンスクリーンはより鮮やかな効果を持ち、実装も非常に簡単です。 CSSを使用して簡単なスケルトン画面を実装できます。 (スケルトン画面とは何ですか?)

推奨学習: CSS ビデオチュートリアル、CSS チュートリアル (画像とテキスト)

アイデア

HTML スケルトン
CSS プラススタイル
CSSプラスアニメーション

スケルトンの構築から始めます

スケルトンの構造は非常にシンプルで、好きなブロックレベルの要素をいくつかランダムに配置するだけでOKです。

<p>
  </p>

ほら、とても簡単です。

CSSカラーリング

よく見るスケルトン画面はこんな感じです

説明の便宜上、コントラストを強調するために、最初に

のゴーストバージョンを作成します。まず CSS の linear-gradient 属性を使用して、中央に緑がかった赤色のグラデーション画像を描画し、それを li タグの背景として塗りつぶします。

linear-gradient() は次の画像を作成できます。複数色の線形グラデーション。詳細については、ここを参照してください。

li{    background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%);    width: 100%;    height: 0.6rem;    list-style: none;
}

実際の使用では、グラデーションを変更します。次のような通常の色にマップします。 background-image: Linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)

Let動きます

残りは真ん中のグリーンを動かすことです

それを動かす方法はありますか?

ここで使用されるのは、背景画像を拡大し、背景の位置のパーセンテージを動的に設定し、背景の位置を変更して、コンテナに対する画像のさまざまなオフセット値を計算することです。アニメーション効果を実現します。

li{    background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%);    width: 100%;    height: 0.6rem;    list-style: none;    background-size: 400% 100%;    background-position: 100% 50%;    animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% {    background-position: 100% 50%;
  }
  100% {    background-position: 0 50%;
  }
}

ここでは background-position 属性に 2 つの値が設定されています。最初の値はコンテナに対する水平位置のオフセットを表し、2 番目の値はコンテナのオフセットを表しますコンテナに対する垂直位置。

パーセンテージを使用して background-position 値を設定すると、実際の位置決め値 (コンテナの幅 - 画像の幅) * (位置 x%) を計算する式が実行されます。 = (x オフセット値)、つまり、コンテナと画像の間の幅の差に、設定された位置決めパーセント値が乗算されます。結果が実際のオフセット値です。background-size# の幅を設定します。 ## から 400% のいずれかにします。目的は、コンテナーとの幅の差を作成することです。

一部の学生は、

background-size 値を 50% に設定すると、コンテナーとの幅の差が生じる可能性があると尋ねるかもしれません。はい、ただしこの方法では、背景画像がコンテナ全体にタイル状に配置され、緑色の点が 2 倍になることに驚くでしょう。

background-size にさまざまな値を設定してみて、そのパフォーマンスを観察し、なぜこれが起こるのかを考えることができます。

最後に、キーフレームアニメーションを使用して、x 座標の

background-position 値を 100% から 0%# に設定します。 # #<pre class="brush:php;toolbar:false">@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }</pre> コンテナの幅が

100px

であると仮定し、背景画像の幅は 400px であるとします。上記の式を使用すると、アニメーションの最初のフレームで、背景画像はコンテナに対して相対的にオフセットされます。実際の値は <pre class="brush:php;toolbar:false">(100px-400px)*100% = -300px</pre> です。最後のフレームの実際のオフセットです。