CSS を使用してシマー効果を実現する

シマー効果は、多くの Web サイトが読み込みインジケーターに追加するアニメーション効果です。これは、Web ページまたは HTML 要素内の動きの錯覚です。

線形グラデーション、キーフレーム、アニメーション、背景の位置、変換などのさまざまな CSS プロパティを使用して、ちらつき効果を作成できます。基本的に、シマー効果は、交互に動く光と闇の線を追加します。

ここでは、CSS を使用してシマー効果を作成する方法を学びます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って CSS を使用してシマー効果を作成できます。

リーリー

上記の構文では、div 要素の背景として線形グラデーションを追加し、シマー キーフレームを使用してアニメーションを追加しました。

きらめきキーフレーム内で div を左から右に移動して、きらめき効果を作成します。

＃＃＃例＃＃＃

以下の例では、親 div としてコンテナ div があります。親 div 要素内に、「shimmer」クラス名を持つ複数のボックス要素と div を追加しました。さらに、div 要素に CSS を適用しました。

CSS では、背景、幅、シマー div 要素のシマー キーフレームの線形グラデーションをアニメーション化します。シマー キーフレームの CSS 変換プロパティを使用して、シマー div 要素を - 230% から 230% に移動します。

出力では、ユーザーは親 div 要素上の動く線を観察できます。これはフリッカー効果と呼ばれます。

リーリー ＃＃＃例＃＃＃

以下の例では、画像 div 要素にちらつき効果を追加します。ここでは、「背景」CSS プロパティの代わりに「マスク」CSS プロパティを使用しています。 CSS プロパティ「-webkit-mask」の値として線形グラデーションを追加しました。

シマーキーフレームでは、左側の「webkit-maskposition」を使用してマスクの位置を設定します。出力では、画像上の明るい線と暗い線が交互に現れるちらつき効果を観察できます。

リーリー ＃＃＃例＃＃＃

以下の例では、読み込みインジケーターに点滅効果を追加しています。まず、HTML と CSS を使用してローディング インジケーターを作成します。その後、背景 CSS プロパティを使用して線形グラデーションをシマー div に適用します。

キーフレームでは、シマー div を正の x 方向に移動しながら回転させます。出力では、ユーザーは読み込みインジケーターの点滅効果がいかに美しいかを観察できます。

リーリー

ユーザーは、CSS を使用して Web ページにちらつき効果を追加する方法を学びました。最初の例では、div 要素に瞬き効果を追加しました。 2 番目の例では、CSS の「mask」プロパティを使用して画像要素にちらつき効果を追加します。前の例では、読み込みインジケーターに点滅効果を追加しました。

以上がCSS を使用してシマー効果を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。