is 및 where 선택기: CSS3 애니메이션 및 전환 구현을 위한 핵심 기술-CSS 튜토리얼-php.cn

is 및 where 선택기: CSS3 애니메이션 및 전환 구현을 위한 핵심 기술

PHPz

풀어 주다： 2023-09-11 09:42:26

원래의

676명이 탐색했습니다.

is 및 where 선택기: CSS3 애니메이션 및 전환 구현을 위한 핵심 기술

소개:
웹 개발에서는 CSS3 애니메이션 및 전환 효과가 널리 사용되며 웹 페이지에 생생하고 대화형 기능을 추가합니다. 이러한 효과를 달성하기 위한 핵심 기술 중 하나는 is 및 where 선택기를 사용하는 것입니다. 이 기사에서는 선택기가 무엇인지, 어디에 있는지, 그리고 이를 사용하여 다양하고 멋진 애니메이션과 전환 효과를 만드는 방법을 소개합니다.

1. 선택자란 무엇인가요?
is 선택기는 개발자가 요소의 상태에 따라 다양한 스타일을 적용할 수 있게 해주는 CSS3의 매우 유용한 기능입니다. is 선택기를 사용하면 보다 유연한 스타일 제어가 가능하고 요소의 모양을 동적으로 변경할 수 있습니다.

is 선택기의 구문은 다음과 같습니다:
:is(selector)

is 선택기의 매개변수에 클래스 선택기, 속성 선택기, 의사 클래스 선택기 등과 같은 유효한 CSS 선택기를 전달할 수 있습니다. . 요소가 is 선택기의 매개변수 조건을 충족하면 관련 스타일이 적용됩니다.

예를 들어, 마우스를 가리키면 클래스 상자가 있는 요소가 빨간색으로 바뀌도록 하려면 is 선택기를 사용하여 이를 달성할 수 있습니다.

.box:is(:hover) {

color: red;

로그인 후 복사

}

In 이렇게 하면 마우스를 가리키면 클래스 상자가 있는 요소에서 멈추면 빨간색으로 변합니다.

2. 위치 선택기가 무엇인가요?
where 선택기는 CSS3의 또 다른 강력한 기능입니다. 이는 속성을 기반으로 특정 요소를 선택할 수 있으며 특히 복잡한 선택기 제외 상황을 처리하는 데 적합합니다.

where 선택기의 구문은 다음과 같습니다:
:where(선택기)

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 선택기를 사용하여 요소의 페이드인 및 페이드아웃 효과를 구현할 수 있습니다. where 선택기를 사용하면 CSS 코드를 단순화할 수 있는데, 이는 특히 요소의 페이드인 및 페이드아웃 효과를 구현하는 데 적합합니다.

예를 들어 이미지에 그라데이션 전환 효과를 추가하려면 where 선택기를 사용하여 이를 달성할 수 있습니다.

img:where(.fadeIn) {

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

로그인 후 복사

}

img:where(. fadeIn).show {

opacity: 1;

로그인 후 복사

}

is 선택기를 사용하여 요소의 다양한 상태에 따라 요소의 스타일을 동적으로 전환하여 다음을 달성할 수 있습니다. 동적 전환 효과.

예를 들어 탐색 메뉴를 구현하고 다른 페이지에서 해당 메뉴 항목을 강조 표시하려는 경우 is 선택기를 사용하여 이를 달성할 수 있습니다.

.nav-item:is(.active) {

color: red;
font-weight: bold;

로그인 후 복사

}

.nav-item:is(:hover) {

color: blue;

로그인 후 복사

}

결론:

is와 선택기는 CSS3 애니메이션 및 전환을 구현하는 핵심 기술 중 하나입니다. 이를 통해 개발자는 요소의 상태와 속성을 기반으로 스타일을 제어할 수 있어 다양하고 멋진 애니메이션과 전환이 가능해집니다. 현재 및 위치 선택기를 이해하고 유연하게 사용함으로써 웹 페이지에 더욱 생생하고 대화형 기능을 추가하고 더 나은 사용자 경험을 제공할 수 있습니다.

위 내용은 is 및 where 선택기: CSS3 애니메이션 및 전환 구현을 위한 핵심 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!