CSS에서 여러 속성을 사용하는 전환 속기?

CSS를 사용하여 HTML 요소에 전환을 추가할 수 있습니다. 이 튜토리얼을 시작하기 전에 먼저 전환이 무엇인지 이해해 봅시다. 기본적으로 전환은 요소가 한 상태에서 다른 상태로 변경되는 것을 말합니다. 예를 들어, 사용자가 요소 위로 마우스를 가져가면 요소의 크기가 변경됩니다.

CSS에서는 두 가지 방법으로 요소에 전환을 추가할 수 있습니다. 첫 번째는 "transition-property", "transition-duration", "transition-timing-function", "transition-delay" 네 가지 속성을 동시에 사용하는 것입니다. 두 번째는 "전환" CSS 속성을 사용하는 것입니다.

CSS “전환” 속성은 다음 CSS 속성의 약어입니다.

• Transition-property - 전환 효과를 적용하는 데 필요한 CSS 속성을 지정합니다. 모든 속성에 변환을 적용해야 하는 경우 "all"을 값으로 사용할 수 있습니다.

• Transition-duration - 전환 효과의 총 지속 시간(초)입니다.

• Transition-timing-function - 전환이 어떻게 발생해야 하는지를 결정합니다. 전환 타이밍 기능의 예로는 "liner", "ease-in", "ease-out", "ease-in-out" 등이 있습니다.

• Transition-delay - 전환 효과가 시작된 후의 시간입니다.

문법

사용자는 다음 구문에 따라 여러 CSS 속성과 함께 전환 속기를 사용할 수 있습니다.

으아악

위 구문에서 첫 번째 값은 변환 속성, 두 번째 값은 변환 기간, 세 번째 값은 타이밍 함수, 마지막 값은 변환 지연입니다.

예 1

아래 예에는 200 x 200 크기의 div 요소가 있으며 div 요소 높이에 2초 동안 지속되는 전환 효과를 추가했습니다. 여기서 변환 지연은 0.5초이고 타이밍 기능은 "ease-in-out"입니다.

사용자는 div 요소 위에 마우스를 올려 전환 효과를 관찰할 수 있습니다. div 요소의 높이가 즉시 증가하는 대신 부드럽게 증가하는 것을 볼 수 있습니다.

으아악

예 2

아래 예에서 div 요소의 왼쪽 초기 여백은 2px입니다. 사용자가 div 요소 위로 마우스를 가져가면 왼쪽 여백을 100px로 늘립니다. div 요소의 margin-left CSS 속성에 0.5초 지연되고 2초 동안 지속되는 전환 효과를 추가했습니다.

출력에서 div 요소 위로 마우스를 가져가면 2초 안에 오른쪽으로 100px 이동합니다.

으아악

예 3

아래 예에서는 여러 CSS 속성에 전환 효과를 추가했습니다. 여기에서는 "왼쪽 여백", "높이", "너비", "배경색", "색상" 및 "글꼴 크기" CSS 속성에 대한 2초 전환 효과를 추가했습니다.

출력에서 사용자는 모든 CSS 속성의 전환이 원활하다는 것을 확인할 수 있습니다. 그러나 "transition-property"의 값으로 "all"을 사용하여 모든 속성에 전환을 추가할 수 있습니다.

으아악

사용자는 전환과 관련된 여러 CSS 속성의 약어인 "전환" CSS 속성을 사용하는 방법을 배웠습니다. 여기에서는 위의 세 가지 예에서 "transition" CSS 속성을 사용하는 방법을 배웠습니다. 이전 예에서는 여러 CSS 속성에 전환 효과를 추가했습니다.

위 내용은 CSS에서 여러 속성을 사용하는 전환 속기?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!