カスタムCSSロードアニメーションカラー：LDS-Rippleを例として取ります

この記事では、lds-ripple などの CSS 読み込みアニメーションの色をカスタマイズする方法について詳しく説明します。中心となるのは、アニメーションの視覚的表示メカニズムを理解し、color 属性を誤用するのではなく、ターゲットを絞った方法で .lds-ripple div スタイル ルールの border 属性値を変更して、ローダー リング効果の色のカスタマイズを簡単に実現することです。

CSS読み込みアニメーションの構成と色の仕組みを理解する

Web 開発では、ユーザー エクスペリエンスを向上させ、コンテンツが読み込まれていることをユーザーに知らせるために、CSS 読み込みアニメーション (プリローダー) がよく使用されます。このようなアニメーションの多く、特に円や線で構成されるアニメーションの視覚効果は、色のプロパティによって制御されず、要素の境界線や背景のプロパティを巧みに利用しています。

一般的な lds-ripple ローディング アニメーションを例に挙げます。これは、継続的に拡大およびフェードアウトする 2 つの円形の境界線による波紋効果をシミュレートします。色を変更しようとする場合、直感的には color 属性を変更しようとするかもしれませんが、lds-ripple のアニメーションリングは div 要素の border 属性によってレンダリングされるため、color 属性（主にテキストの色に影響します）は機能しません。したがって、これらのリングの色を変更するには、これらのリングを生成する正確な境界線プロパティを変更する必要があります。

コアの変更: 境界線属性を見つけて調整する

lds-ripple 読み込みアニメーションの色を設定するには、円形の境界線を定義する CSS ルールを見つけて、その中の境界線の色の値を変更することが重要です。

lds-ripple の CSS 定義では、.lds-ripple div セレクターは、境界線を含む各アニメーションリングの基本スタイルを定義する役割を果たします。通常、元のコードでは、border: 4px Solid #fff; などのデフォルトの境界線の色が設定されます。ここの #fff (白) がリングのカラーソースです。

変更手順:

1. CSS スタイルシートで .lds-ripple div を定義するルールを見つけます。
2. このルールの境界線属性値を希望の色に変更します。たとえば、ローダーを赤で表示したい場合は、#fff を赤、#FF0000、または rgb(255, 0, 0) に置き換えることができます。

サンプルコード

以下は、色の変更を含む完全な HTML、CSS、JavaScript の例です。

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>カスタマイズされた CSS 読み込みアニメーションの色</title>

/* ローダーコンテナ全体のスタイル */
#ローダー {
  表示: なし。 /* デフォルトでは非表示になります */
  コンテンツの位置揃え: 中央;
  整列項目: 中央;
  幅:100%;
  高さ:100%;
  境界線:緑色の実線 1 ピクセル; /* ローダーの色に関係なく、サンプルの境界線*/
  不透明度:0.9;
  背景色:白煙;
  位置:絶対;
  左:0;
  トップ:0;
  z インデックス: 9999; /* ローダーが上にあることを確認してください*/
 }

/* lds-ripple アニメーション コンテナ スタイル*/
.lds-ripple {
  表示: インラインブロック;
  位置: 相対的;
  幅: 80ピクセル;
  高さ: 80ピクセル;
}

/* アニメーションを構成する各 div 要素のスタイル*/
.lds-ripple div {
  位置: 絶対;
  /* 主要な変更: 境界線の色を #fff からdesired_colorに変更します */
  境界線: 4 ピクセルの赤一色。 /* ここでローダーの色を赤に設定します*/
  不透明度: 1;
  境界半径: 50%;
  アニメーション: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) 無限;
 }

/* 2 番目のアニメーション div の遅延。千鳥効果を作成するために使用されます*/
.lds-ripple div:nth-child(2) {
  アニメーション遅延: -0.5 秒;
}

/*アニメーションキーフレーム定義*/
@keyframes lds-ripple {
  0% {
    上: 36ピクセル;
    左: 36ピクセル;
    幅: 0;
    高さ: 0;
    不透明度: 0;
  }
  4.9% {
    上: 36ピクセル;
    左: 36ピクセル;
    幅: 0;
    高さ: 0;
    不透明度: 0;
  }
  5% {
    上: 36ピクセル;
    左: 36ピクセル;
    幅: 0;
    高さ: 0;
    不透明度: 1;
  }
  100% {
    上: 0px;
    左: 0px;
    幅: 72ピクセル;
    高さ: 72ピクセル;
    不透明度: 0;
  }
}
スタイル>



<button id="btnShow" onclick="showLoader()">ローダーを表示</button>

<div id="ローダー">
  <div class="lds-ripple">
    <div></div>
    <div></div>
  </div>
</div>


関数 showLoader() {
  document.getElementById("loader").style.display = "flex";
  //シミュレートされたロード後にローダーを非表示にする setTimeout(() => {
    // document.getElementById("loader").style.display = "none";
  }, 3000);
}

以上がカスタムCSSロードアニメーションカラー：LDS-Rippleを例として取りますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。