CSS를 사용하여 애니메이션을 분할 요소에 바인딩하는 방법은 무엇입니까?

라고도 알려진 Division 요소는 HTML 요소를 그룹화한 다음 CSS를 사용하여 스타일을 지정하는 데 자주 사용됩니다. 애니메이션은 시각적인 효과를 더해 매력적으로 보이게 하는 그래픽 요소입니다. HTML과 CSS에서는 일반적으로 이 요소의 이름을

로 지정합니다. 이 문서에서는 CSS가 애니메이션을 분할 요소에 바인딩하는 방법을 설명합니다.

키프레임 방법을 사용하여 애니메이션 정의

키프레임 방법은 CSS에서 애니메이션 효과를 만드는 가장 일반적인 방법입니다.

예

으아아아

Explanation

의 중국어 번역은

Explanation

입니다.

• HTML 코드는 애니메이션을 위해 "컨테이너" 클래스가 있는 Division 요소를 사용합니다. @keyframes 규칙에 정의된 애니메이션은 교대 루프를 통해 요소를 0픽셀에서 오른쪽으로 100픽셀로 이동한 다음 오른쪽으로 200픽셀로 이동합니다.

• CSS 코드는 뷰포트의 너비가 50%, 높이가 뷰포트의 10%, 배경색이 보라색인 "컨테이너" 클래스를 정의합니다. 'myAnimation 2s 무한 교대' 값과 함께 'animation' 속성을 사용하여 요소에 애니메이션을 적용합니다. div 요소는 HTML 본문 내에 포함되어 있으며 웹 브라우저에서 볼 때 애니메이션이 적용됩니다.

클리핑 경로 사용

이전 예제를 이해했다면 매우 복잡한 애니메이션을 만드는 것은 너무 많은 코드 줄을 수동으로 작성해야 하기 때문에 상당히 어렵다는 것을 알았을 것입니다. 따라서 훌륭한 애니메이션 효과를 얻기 위해 사용할 수 있는 다른 도구도 많이 있습니다. 그러한 예 중 하나는 클리핑 패스를 사용하는 것입니다.

• clip-path는 요소의 나머지 부분을 숨기면서 표시(클리핑)할 요소의 특정 영역을 지정할 수 있는 CSS 속성입니다.

• 원, 직사각형, 다각형 또는 SVG 경로와 같은 기본 모양을 사용하여 생성할 수 있는 클리핑 경로로 영역을 정의할 수 있습니다.

예

으아아아

Explanation

의 중국어 번역은

Explanation

입니다.

• 여기서 HTML 문서는 플렉스 컨테이너를 사용하여 하위 요소를 가로 및 세로 중앙에 표시합니다. body 요소의 높이는 100vh이고 .container 클래스에는 원형 클리핑 마스크와 호버 전환 효과가 있습니다.

• .container 클래스에는 배경색, 너비, 패딩 및 텍스트 정렬, 테두리 반경 20px, 원형 마스크를 생성하는 클립 경로 속성이 있습니다. 호버 의사 클래스는 1초 전환 효과로 클립 경로의 크기를 변경합니다.

이 주제를 더 자세히 살펴보려면 다음 튜토리얼을 읽고 해당 주제에 대해 자세히 알아보세요. -

https://www.tutorialspoint.com/css/css_clip.htm

결론

이 기사에서는 CSS를 사용하여 애니메이션을 div 요소에 바인딩하는 방법을 배웠습니다. 동일한 작업을 수행하기 위해 키프레임 방법을 사용하는 방법을 독점적으로 살펴보겠습니다. 지속 시간, 지연, 동작 등과 같은 애니메이션 속성을 사용자 정의할 수 있습니다.

위 내용은 CSS를 사용하여 애니메이션을 분할 요소에 바인딩하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!