単一要素ローダー：バー

この記事では、スピナーとドットに焦点を当てた以前の記事で使用されていたシングル要素アプローチと柔軟なCSS技術に従って、バーを使用してロードアニメーションの作成を検討します。 CSSのパワーを活用して、コードの変更を最小限に抑えて多数のバリエーションを生成します。

シリーズの概要

• 単一要素ローダー：スピナー
• 単一要素ローダー：ドット
• 単一要素ローダー：バー -現在の記事
• 単一要素ローダー：3Dに進みます

20のバーローダーの例に飛び込みましょう。これは気が遠くなるように思えるかもしれませんが、すべての例は同じコード構造を共有しており、単純な値調整を通じてバリエーションが達成されます。焦点は、特定のローダーを作成することではなく、単一のベースコードから無数のバリエーションを生成するためのマスタリングテクニックに焦点を当てています。

バーの構築

まず、 width （またはheight ）とaspect-ratioを使用してディメンションを定義して、プロポーションを維持することから始めます。

 .bars {
  幅：45px;
  アスペクト比：1;
}

線形勾配の背景を使用して3つのバーをシミュレートします。これは、パート2のドットローダーと同様の方法です。

 .bars {
  幅：45px;
  アスペクト比：1;
  -C：繰り返し線形勾配（＃000 0 0）; / *色を定義 */
  背景： 
    var（ -  c）0％50％、
    var（ -  c）50％50％、
    var（ -  c）100％50％;
  バックグラウンドサイズ：20％100％; / * 20％ *（3バー2スペース）= 100％ */
}

これにより、3バー構造が作成されます。この記事では、バックグラウンドの操作を大幅に利用しているため、以前の記事またはリンクされたスタックオーバーフローの回答を参照すると、必要に応じてより詳細な説明が提供されます。

バーのアニメーション

アニメーションは、要素のサイズまたは位置を変更することで実現されます。キーフレームを使用してサイズをアニメーション化しましょう。

 @KeyFramesロード{
  0％{バックグラウンドサイズ：20％100％、20％100％、20％100％; }
  33％{バックグラウンドサイズ：20％10％、20％100％、20％100％; }
  50％{バックグラウンドサイズ：20％100％、20％10％、20％100％; }
  66％{バックグラウンドサイズ：20％100％、20％100％、20％10％; }
  100％{バックグラウンドサイズ：20％100％、20％100％、20％100％; }
}

キーフレームは、アニメーションの期間全体にわたって各グラデーションセグメントのbackground-size調整します。

または、サイズを20% 50%に固定し、位置をアニメーション化すると、異なる結果が得られます。

 .loader { / * ...以前のスタイル... * /
  アニメーション：1Sの無限線形をロードします。
}
@KeyFramesロード{
  / * ... Animationキーフレームを配置... */
}

サイズと位置を操作することにより、無数のローダーのバリエーションが可能になります。より複雑な勾配が設計オプションをさらに拡張します。デモのほとんどの例は、同じマークアップとスタイルを使用しており、アニメーションの組み合わせのみが異なります。

高度なテクニックでの強化

Dotsの記事からのマスキング手法は、ここで適用できます。 background-*プロパティをmask-*に置き換え、勾配を追加すると、視覚的に魅力的なローダーが作成されます。コアテクニックはドットとバーの間で一貫しています。グラデーションは形状を定義し、アニメーションがサイズ/位置を変更し、マスクが色を追加します。

バーを丸くする

別のアプローチでは::before ::after使用して、3つの丸いバーを作成します。

 .loader { / * ...サイズと位置にCSS変数を使用したスタイル... * /}

連続勾配効果は、各要素内の個々の勾配を慎重に配置することによりシミュレートされます。遅延で高さをアニメーション化すると、さまざまなアニメーションが生成されます。

結論

この記事では、最小限のコードで複雑なロードアニメーションを作成する汎用性を示しています。単一の要素、勾配、擬似要素、アニメーションを組み合わせることで、膨大なロードアニメーションデザインを達成できます。提供された例とテクニックは、実験とユニークで視覚的に魅力的なローダーの作成を促進します。

以上が単一要素ローダー：バーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。