CSS에서 분할 요소 위로 마우스를 가져가서 너비를 점진적으로 변경하는 방법은 무엇입니까?

사용자 상호 작용이나 사이트에서 보낸 시간을 통해 요소의 스타일을 점진적으로 변경하고 한 스타일에서 다른 스타일로 전환하려는 경우 언제든지 가능합니다. 애니메이션을 사용하여 일정 기간 동안 다양한 스타일을 변경할 수 있습니다. 필요한 애니메이션 속성을 살펴보겠습니다.

• Keyframes− 요소의 애니메이션을 지정하는 데 사용됩니다. 여기에는 요소 스타일에 발생하는 변경 사항이 포함됩니다. 그런 다음 요소는 처음에 있었던 스타일에서 마지막으로 언급된 스타일로 이동합니다.

• Animation-name - 애니메이션을 추가할 때마다 규칙을 지정할 필요가 없도록 애니메이션을 참조하는 데 사용됩니다.

• Animation Duration - 요소에 적용되는 애니메이션의 지속 시간을 지정합니다. 초기값은 0ms 이며 무한정 진행 가능합니다.

• Animation-iteration-count − 애니메이션이 반복되는 횟수를 결정합니다.

• Animation Delay − 일정 시간 동안 애니메이션을 지연해야 하는 경우 이 속성을 사용할 수 있습니다.

• 애니메이션 방향 − 애니메이션이 정방향, 역방향 또는 두 방향을 교대로 사용해야 하는지 여부를 지정합니다.

• 애니메이션 시간 기능 − 애니메이션의 시작, 중간, 끝에서 서로 다른 시간 간격을 가지기를 원할 때 이 속성을 사용합니다.

이 모든 속성으로 구성된 "animation" 약어 속성을 사용할 수도 있습니다. 모든 요소에서 작동하지만 상속할 수는 없습니다. 약어 표기법을 사용할 때에는 각 값이 그 순서에 따라 다르게 해석되기 때문에 값의 순서가 중요하다는 점을 유의하셔야 합니다.

예

CSS에서 애니메이션을 사용하는 예는 다음과 같습니다.

으아악

이제 CSS의 애니메이션이 무엇인지 알았으므로 div 요소에 애니메이션을 적용하여 너비를 점진적으로 변경하는 방법에 대해 논의하겠습니다.

전환 속성

이 문제를 해결하기 위해 전환 속성을 사용하겠습니다. 이 속성은 요소에 전환 효과를 추가하는 데 사용됩니다. CSS에서 사용할 수 있는 단축 속성입니다.

애니메이션이 발생하고 요소가 한 상태에서 다른 상태로 변경될 때 발생하는 전환을 정의합니다. 모든 요소에 적용되며 상속할 수 없습니다.

다음 속성은 축약된 전환 속성을 구성합니다.

• Transition-delay − 이 속성은 전환 속성을 적용하기 전에 브라우저가 기다려야 하는 시간을 지정합니다. 초기값은 0이고, 양수값은 더 오래 기다리게 하고, 음수값은 전환을 더 빠르게 만듭니다.

• Transition Duration - 전환 효과가 표시되고 그 후에 애니메이션이 끝나는 시간을 설정합니다. 이 속성의 기본값은 0이므로 기본적으로 애니메이션이 표시되지 않습니다.

• Transition-property - 전환 효과가 적용될 요소를 설정합니다. None과 all이라는 두 가지 값을 가질 수 있습니다. 기본적으로 값은 all로 설정되어 있으므로 모든 요소에 전환 효과가 적용되지만, 없음은 해당 전환 효과가 있는 요소가 없음을 의미합니다.

• Transition-timing-function − 이 속성은 애니메이션의 시작, 중간, 끝 부분에서 전환 속도를 제어하는 ​​데 사용됩니다. 초기값은 완화로 설정되어 있지만 CSS에는 미리 정의된 시간 함수가 많이 있습니다.

호버 상태에서 전환 속성을 설정할 수 있으며 호버 또는 활동 의사 클래스를 사용하여 애니메이션이 트리거됩니다. 또한 JS를 사용하여 클래스를 동적으로 할당하고 이를 사용하여 전환을 트리거할 수 있습니다.

예

CSS에서 전환 속성을 사용하는 간단한 예는 다음과 같습니다.

으아악

위 프로그램을 실행하면 텍스트 한 장이 표시되는데, 그 위에 마우스를 올리면 텍스트의 전환 효과를 볼 수 있습니다.

전환을 솔루션으로 사용

이제 당면한 문제를 해결하기 위해 전환을 사용하는 예를 살펴보겠습니다.

으아악

위 프로그램의 출력은 너비가 2초 안에 150px에서 500px로 점진적으로 변경되는 div 상자입니다.

결론

결론적으로 CSS의 호버 선택기를 사용하여 파티션 요소의 너비를 점진적으로 변경하는 것은 추가 코드 없이 미묘한 애니메이션 효과를 추가하는 효율적인 방법입니다. 이는 버튼이나 메뉴와 같은 웹 페이지의 대화형 요소를 만들 때 특히 유용합니다. 단 몇 줄의 코드만으로 역동적인 효과를 만들어 페이지를 돋보이게 만들 수 있습니다.

위 내용은 CSS에서 분할 요소 위로 마우스를 가져가서 너비를 점진적으로 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!