CSS를 사용하여 한 요소에 여러 전환을 만드는 방법은 무엇입니까?

CSS를 사용하여 요소에 여러 전환을 만드는 것은 웹 사이트에 흥미와 상호 작용을 추가하는 좋은 방법입니다. 다양한 전환을 통합함으로써 사용자에게 역동적이고 매력적인 경험을 제공할 수 있습니다. 이 글에서는 CSS를 사용하여 요소에 여러 전환을 만드는 방법에 대한 기본 사항을 다룹니다.

캐스케이딩 스타일 시트(CSS)는 웹 페이지 스타일을 지정하는 강력한 도구입니다. 가장 유용한 기능 중 하나는 요소를 가리키거나 클릭할 때와 같이 요소의 다양한 상태 간에 부드럽고 시각적으로 매력적인 전환을 만드는 기능입니다.

CSS 변환이란 무엇입니까?

여러 전환을 만드는 방법을 배우기 전에 먼저 CSS 전환이 무엇인지 이해해 봅시다. 전환은 요소의 두 상태 간의 점진적인 변화입니다. 예를 들어 버튼 위로 마우스를 가져가면 배경색이 한 색상에서 다른 색상으로 점차 변경됩니다. CSS를 사용하면 이러한 전환의 지속 시간과 타이밍은 물론 변환되는 속성도 지정할 수 있습니다.

문법

으아악

CSS의 전환 속성

CSS에서 사용할 수 있는 전환 속성에는 다음이 포함됩니다.

• transition-property - 이 속성은 변환해야 하는 CSS 속성을 지정합니다.

• transition-duration - 이 속성은 전환 기간을 초 또는 밀리초 단위로 지정합니다. 기본적으로 전환 기간은 0입니다. 이는 전환 효과가 적용되지 않음을 의미합니다.

• transition-timing-function - 이 속성은 전환 속도와 타이밍을 제어합니다.

• transition-delay - 이 속성은 전환이 시작되기 전의 지연을 지정합니다.

기본 변환 만들기

전환을 만들려면 전환 기간, 타이밍 기능, 지연 등 애니메이션을 적용할 속성을 지정해야 합니다. 예를 들어, 버튼 너비에 대한 전환을 생성하려면 다음 코드를 사용할 수 있습니다.

으아악

위의 코드는 이즈 인/아웃 타이밍 기능을 사용하여 버튼 너비가 0.5초 동안 전환되도록 지정합니다.

여러 전환 만들기

요소에 여러 전환을 생성하려면 CSS 코드에 추가 전환을 추가해야 합니다. 예를 들어 너비와 배경색 속성을 모두 변환하는 버튼을 만들려면 다음 코드를 사용할 수 있습니다.

으아악

위의 코드는 버튼의 너비와 배경색 속성이 이즈 인/아웃 타이밍 기능을 사용하여 0.5초에 걸쳐 변환되도록 지정합니다.

다음은 CSS를 사용하여 요소에 여러 전환을 만드는 방법에 대한 전체 코드 예제입니다.

예 1

이 예에서는 너비와 배경색 속성을 전환하는 버튼을 만듭니다. 그러나 각 전환마다 서로 다른 지속 시간을 사용하여 시차 있는 효과를 생성합니다.

으아악

위 예에서는 너비를 100px로 설정하고 버튼에 녹색 배경색상을 설정했습니다. 그런 다음 전환 속성을 설정하여 너비 및 배경색 속성을 전환합니다. 그러나 너비 전환에는 0.5초, 배경색 전환에는 1초의 지속 시간을 사용합니다. 이렇게 하면 버튼 너비가 배경색보다 빠르게 전환되는 시차 효과가 생성됩니다. 버튼 위에 마우스를 올리면 너비가 150px로 확장되고 배경색이 빨간색으로 변경됩니다.

예 2

이 예에서는 배경색과 테두리 반경 속성을 모두 변환하는 상자를 만듭니다. 그러나 경계 반경 전환에는 지연을 사용합니다.

으아악

위 예에서는 상자의 너비와 높이를 200px로 설정하고 배경색을 빨간색으로 설정했습니다. 그런 다음 배경색 및 테두리 반경 속성을 전환하기 위해 전환 속성을 설정합니다. 그러나 경계 반경 전환에는 0.5초의 지연을 사용합니다. 이는 배경색이 즉시 전환되는 반면 테두리 반경은 전환되기 전에 0.5초를 기다린다는 의미입니다. 상자 위에 마우스를 올리면 배경색이 파란색으로 바뀌고 테두리 반경이 0이 되어 사각형이 만들어집니다.

예 3

여기에서는 너비와 색상 속성을 변환할 수 있는 버튼을 만듭니다. 그러나 각 전환마다 서로 다른 타이밍 기능을 사용하여 고유한 효과를 만들어 보겠습니다.

으아악

위 예에서는 버튼의 너비를 120px로 설정하고 배경색을 파란색으로 설정한 다음 전환 속성을 설정하여 너비와 색상 속성을 전환했습니다. 그러나 각 전환마다 다른 타이밍 기능을 사용합니다. 너비 전환은 사용자 정의 3차 베지어 함수를 사용합니다. 마우스를 버튼 위에 놓으면 너비가 180px로 확장되고 텍스트 색상이 빨간색에서 흰색으로 변경됩니다.

결론

CSS 전환은 웹 페이지에 부드럽고 시각적으로 매력적인 효과를 만드는 강력한 도구입니다. 전환 속성을 사용하면 지속 시간, 타이밍 기능, 전환되는 속성을 지정할 수 있습니다. 또한 전환 속성에 여러 속성을 지정하여 요소에 여러 전환을 만들 수도 있습니다.

위 내용은 CSS를 사용하여 한 요소에 여러 전환을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!