is および where セレクター: CSS3 アニメーションとトランジションを実装するためのコアテクノロジー-CSSチュートリアル-php.cn

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

PHPz

リリース： 2023-09-11 09:42:26

オリジナル

649 人が閲覧しました

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 セレクターを使用してアニメーションとトランジション効果を作成するにはどうすればよいですか?以下に例をいくつか示します。

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

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

button:is(:hover, :focus) {

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

ログイン後にコピー

}

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

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

img:where(.fadeIn) {

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

ログイン後にコピー

}

img:where(.fadeIn).show {

opacity: 1;

ログイン後にコピー

}

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 サイトの他の関連記事を参照してください。