純粋なCSSの色の混合

赤と青が紫に等しい...そうですか？

これをCSSで表現する方法は？簡単ではありません。 Color-Mix関数のドラフト提案があり、Chromeもある程度の関心を示していますが、目の前にはそうではないようです。ネイティブCSSの色の混合を持つことは、デザイナーが色で作業するときにより柔軟性を提供するため、優れています。たとえば、単一のベースカラーのトーンバリエーションを作成して、デザインパレットを形成できます。

しかし、これはCSS-Tricksなので、CSSのトリックをいくつかしましょう。

数値を操作するためのCSSにcalc（）関数があります。ただし、hsl（）やrgb（）などのいくつかのカラー形式が数値であっても、色を直接操作する方法はほとんどありません。

色とアニメーションを混ぜます

CSSを使用して、ある色と別の色の間を移行できます。これは機能します：

 div {
  背景：青;
  遷移：0.2秒;
}
Div：Hover {
  背景：赤;
}

アニメーションを使用する例は次のとおりです。

 div {
  背景：青;
  遷移：0.2秒;
}
Div：Hover {
  アニメーション：0.2Sフォワードを変更します。
}

@KeyFrames Change-Color {
  に {
    背景：赤;
  }
}

これは、色が赤と青の間を移動するのを見ることができる無限に実行されているキーフレームアニメーションです。コンソールを開き、ページをクリックします。JavaScriptでも、アニメーションの任意のポイントで現在の色を伝えることができます。

それで、アニメーションの真ん中で一時停止したらどうでしょうか？色の混合が機能します！これは、1秒間0.5秒の期間で一時停止されたアニメーションであるため、次の途中です。

これは、-0.5秒のアニメーション遅延を設定することで行います。赤と青の半分は何ですか？紫。アニメーション遅延を調整して、2つの色の割合を指定できます。

これは、ChromiumカーネルブラウザとFirefoxで動作します。 Safariでは、アニメーション名を変更して、ブラウザにアニメーションの進行状況を再計算するように強制する必要があります。

このトリックは、色にアルファチャネルを追加するためにも使用できます。これは、テーマデザインに役立つことがよくあります。

CSSカスタムプロパティにブレンド色を追加します

これまでのところ、これは巧妙なトリックですが、ブレンド色を使用するために必要な要素にアニメーションを適用し、@KeyFramesで変更するすべてのプロパティを設定する必要があることは実用的ではありません。

いくつかのCSS機能を追加すると、これを改善できます。

1. タイプ@PropertyのCSSカスタムプロパティを使用して、適切な色として作成できるように、色としてアニメーション化できるようにします。
2. SASS @Functionを使用して、特定のポイントでキーフレームを簡単に呼び出します。

これで、アニメーションを呼び出す必要がありますが、その結果、他のプロパティにカスタムプロパティを使用できます。

以上が純粋なCSSの色の混合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。