is および where セレクター: CSS3 アニメーションとトランジションを実装するためのコア テクノロジー

is and where セレクター: CSS3 アニメーションとトランジションを実現するためのコア テクノロジー

はじめに:
Web 開発では、CSS3 アニメーションとトランジション効果が広く使用されています。 Web ページに鮮やかでインタラクティブな機能を追加します。これらの効果を実現するためのコア テクノロジーの 1 つは、is セレクターと where セレクターを使用することです。この記事では、セレクターとは何か、その場所と、セレクターを使用してさまざまな見事なアニメーションやトランジション効果を作成する方法を紹介します。

1. is セレクターとは何ですか?
is セレクターは CSS3 の非常に便利な機能で、開発者は要素の状態に基づいてさまざまなスタイルを適用できます。 is セレクターを使用すると、より柔軟なスタイル制御を実現し、要素の外観を動的に変更できます。

is セレクターの構文は次のとおりです。
:is(selector)

is セレクターのパラメーターには、クラスなどの有効な CSS セレクターを渡すことができます。 selector 、属性セレクター、疑似クラス セレクターなど。要素がセレクターのパラメーター条件を満たしている場合、その要素には関連するスタイルが適用されます。

たとえば、マウスがホバーしているときにクラス ボックスを持つ要素を赤にしたい場合、is セレクターを使用してこれを実現できます:

.box:is(:hover) {

color: red;

}

このように、クラスボックスのある要素の上にマウスを置くと、要素が赤くなります。

2. Where セレクターとは何ですか?
where セレクターは、CSS3 のもう 1 つの強力な機能です。要素の属性に基づいて特定の要素を選択でき、複雑なセレクターの除外状況を処理するのに特に適しています。

where セレクターの構文は次のとおりです:
:where(selector)

is セレクターと同様に、where セレクターのパラメーターに有効な CSS 選択を渡すことができます。デバイス。ただし、is セレクターとは異なり、where セレクターはパラメーター条件を無視し、渡されたセレクター スタイルを直接適用します。 where セレクターのパラメーター条件は無視されるため、これを使用して CSS コードを簡素化できます。

たとえば、すべての段落要素にデフォルトのスタイルを設定したい場合は、where セレクターを使用してこれを実現できます:

:where(p) {

font-size: 14px;
color: #333;
line-height: 1.5;

}

このようにして、すべての段落要素にこのデフォルトのスタイルが適用されます。

3. is と where セレクターを使用してアニメーションとトランジション効果を作成する
is と where セレクターを使用してアニメーションとトランジション効果を作成するにはどうすればよいですか?以下に例をいくつか示します。

1. is セレクターを使用して動的要素の変換効果を実現する
   is セレクターを使用して、マウスがホバーしているときに要素のさまざまな状態を追跡できます。ダイナミックな変身効果を実現します。

たとえば、ボタンにマウスオーバー効果を追加し、ボタンがフォーカスを取得したときに色を変更できます。

button:is(:hover, :focus) {

transform: scale(1.1);
background-color: #efefef;

}

2. where セレクターを使用して要素のフェードインおよびフェードアウト効果を実現します
   where セレクターを使用すると、CSS コードを簡素化できます。特に、要素のフェードインおよびフェードアウト効果。

たとえば、画像にグラデーション トランジション効果を追加したい場合、where セレクターを使用してこれを実現できます。

img:where(.fadeIn) {

opacity: 0;
transition: opacity 1s ease-in-out;

}

img:where(.fadeIn).show {

opacity: 1;

}

3. is セレクターを使用して動的な切り替え効果を実現します要素の数
   is セレクターを使用して、要素のさまざまな状態に応じて要素のスタイルを動的に切り替え、動的な切り替え効果を実現できます。

たとえば、ナビゲーション メニューを実装し、別のページで対応するメニュー項目を強調表示したい場合は、is セレクターを使用してこれを実現できます:

.nav-item :is (.active) {

color: red;
font-weight: bold;

}

.nav-item:is(:hover) {

color: blue;

}

結論:
is where セレクターは、CSS3 アニメーションとトランジションを実装するためのコア テクノロジーの 1 つです。これにより、開発者は要素の状態とプロパティに基づいてスタイルを制御し、さまざまな見事なアニメーションやトランジションを実現できます。 is セレクターと where セレクターを理解し、柔軟に使用することで、より鮮やかでインタラクティブな機能を Web ページに追加し、より良いユーザー エクスペリエンスを提供できます。

以上がis および where セレクター: CSS3 アニメーションとトランジションを実装するためのコア テクノロジーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。