CSS를 사용하여 사각형의 무지개 하트에 애니메이션을 적용하시겠습니까?

HTML, CSS, JavaScript를 함께 사용하여 애니메이션을 만들고 이러한 애니메이션을 웹페이지나 웹사이트에 구현할 수 있습니다. CSS는 애니메이션을 만드는 데 사용할 수 있는 많은 속성을 제공하므로 프런트엔드 개발을 위한 강력한 기능을 제공하므로 스타일링에 CSS를 사용하는 것이 좋습니다.

이 기사에서는 CSS를 사용하여 3초마다 색상이 바뀌는 하트 모양을 만들고 애니메이션을 사용하여 두 단계로 수행해 보겠습니다.

무지개 하트를 만드는 단계

신체에 대해 서로 다른 두 부분을 만든 다음 두 클래스를 만듭니다. 그 중 하나는 정사각형이고 다른 하나는 컨테이너입니다. 또한 본문에 몇 가지 속성을 추가하고 표시하려는 모든 것을 중앙에 추가할 CSS 섹션도 만듭니다. 다음 코드를 사용하여 컨테이너를 생성하겠습니다.

예

아래 예에서는 몇 가지 속성을 추가하고 애니메이션이 재생될 하트 모양을 만들었습니다. 아래 코드는 HTML 및 CSS 코드의 출력을 제공합니다.

으아악

원은 이제 서로 다른 색상을 갖게 되므로 원을 구별할 수 있도록 그대로 유지합니다.

이제 이 마음에 생기를 불어넣어 보겠습니다. 이를 위해 하트에 움직임을 추가한 다음 키프레임 속성을 사용하여 색상을 변경하겠습니다. 새로운 프레임이 나타날 때마다 하트의 색상이 변경됩니다.

생성된 하트의 움직임은 사각형 모양으로 바뀌었다가 다시 하트 모양으로 바뀌게 됩니다. 사각형이 하트 모양으로 변할 수 있도록 변환 속성을 사용하여 이 작업을 수행하겠습니다. 이제 우리는 그 방법을 논의했습니다.

예

아래 코드에서는 먼저 컨테이너와 하트 모양을 만드는 데 사용한 것과 동일한 코드를 사용한 다음 색상을 0%에서 100%까지 설정하는 키프레임을 추가합니다. 각 키프레임의 색상이 변경되어 사각형이 하트 모양으로 변하는 것처럼 보입니다. 코드를 사용한 후 어떤 일이 발생하는지 이해할 수 있도록 출력을 살펴보겠습니다.

으아악

처음에는 출력물이 다음과 같은 정사각형으로 보일 것입니다. 그런 다음 모든 프레임에서 정사각형이 하트 모양으로 변하는 듯한 착각을 일으키고, 변환 후에는 다시 반복되어 정사각형으로 변하며, 모든 프레임은 서로 다른 모양으로 변합니다. 컬러 프레임. 완전한 마음은 이렇게 생겼습니다.

드디어 광장에서 온전한 하트를 볼 수 있습니다.

결론

요즘 웹사이트의 애니메이션은 매우 흔하며 이러한 애니메이션은 웹사이트의 실제 모양과 느낌을 결정합니다. 이러한 애니메이션의 목적은 일반적으로 사용자의 관심을 끌거나 사용자가 무언가를 쉽게 이해할 수 있도록 하는 것입니다. CSS는 단 몇 줄의 코드만으로 이러한 애니메이션을 만들 수 있는 매우 강력한 도구입니다. 애니메이션에는 애니메이션 사이에 프레임이 포함되어 있으며 CSS의 키프레임 속성을 사용하여 프레임을 변경합니다.

이 기사에서는 3초마다 색상이 바뀌는 CSS를 사용하여 사각형에서 애니메이션 무지개 하트를 만드는 방법을 배웠습니다.

위 내용은 CSS를 사용하여 사각형의 무지개 하트에 애니메이션을 적용하시겠습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!