CSS 애니메이션 튜토리얼: 회전 및 확대/축소 효과를 구현하는 방법을 단계별로 가르쳐줍니다.-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 애니메이션 튜토리얼: 회전 및 확대/축소 효과를 구현하는 방법을 단계별로 가르쳐줍니다.

PHPz

Oct 18, 2023 am 10:22 AM

회전하다줌CSS 애니메이션

CSS 애니메이션 튜토리얼: 회전 및 확대/축소 효과를 구현하는 방법을 단계별로 가르쳐줍니다.

CSS 애니메이션 튜토리얼: 회전 및 크기 조정 효과를 구현하는 방법을 단계별로 배웁니다.

CSS 애니메이션은 웹 페이지에서 대화형 효과를 구현하는 중요한 기술 중 하나입니다. 이 튜토리얼에서는 CSS를 사용하여 회전 및 크기 조정 효과를 얻는 방법을 단계별로 설명합니다. 이 튜토리얼을 공부하기 전에 CSS 기본 사항을 어느 정도 이해하고 있는지 확인하세요.

준비

시작하기 전에 Sublime Text, Visual Studio Code 등 코드를 작성하기 위한 편집기가 필요합니다. 코드를 작성할 때 HTML 파일을 만들고 CSS 스타일을 도입할 수 있습니다.

HTML 구조 만들기

먼저 HTML 구조를 만들어야 합니다. 이 예에서는 간단한 원을 만듭니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="circle"></div>
</body>
</html>

위 코드에서는 style.css라는 CSS 파일을 도입하고 본문에 클래스 서클이 있는 div 요소를 만들었습니다.

CSS 스타일 작성

다음으로 style.css 파일에 CSS 스타일을 작성하겠습니다. 먼저 .circle 요소의 너비와 높이를 설정하고 모양을 원으로 설정해야 합니다.

.circle {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  border-radius: 50%;
}

위 코드에서는 .circle 요소의 너비와 높이를 200px로 설정하고 모서리를 50%로 설정하여 원을 형성했습니다.

애니메이션 효과 추가

다음으로 .circle 요소에 애니메이션 효과를 추가하겠습니다. 이 애니메이션에는 회전과 크기 조정이라는 두 부분이 포함됩니다.

먼저 회전 애니메이션을 추가하겠습니다. .style.css 파일에 다음 코드를 추가합니다.

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.circle {
  /* 省略之前的代码 */
  animation: rotate 4s infinite;
}

위 코드에서는 @keyframes 키워드를 사용하여 회전이라는 애니메이션을 정의했습니다. 이 애니메이션은 초기 상태 0%에서 시작하여 .circle 요소를 0도 회전하고 최종 상태 100%, .circle 요소를 360도 회전합니다. 그런 다음 animation 속성을 사용하여 이 애니메이션을 .circle 요소에 적용하고 애니메이션 지속 시간을 4초로 설정하여 무한 반복합니다.

다음으로 확대/축소 애니메이션을 추가하겠습니다. .style.css 파일에 다음 코드를 추가합니다.

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.circle {
  /* 省略之前的代码 */
  animation: rotate 4s infinite, scale 2s infinite;
}

위 코드에서는 @keyframes 키워드를 사용하여 scale이라는 애니메이션을 정의했습니다. 이 애니메이션은 초기 상태 0%에서 시작하여 .circle 요소를 원래 크기로 유지하고 중간 상태 50%, .circle 요소를 1.5배 확대하고 100% 최종 상태로 .circle 요소를 반환합니다. 원래 크기로. 그런 다음 animation 속성을 사용하여 이 애니메이션을 .circle 요소에 적용하고 애니메이션 지속 시간을 2초로 설정하여 무한 반복합니다.

효과 표시

이제 이 HTML 파일을 저장하고 실행하여 브라우저에서 효과를 볼 수 있습니다. 회전 및 확대/축소되는 원이 표시됩니다. 필요에 따라 CSS 스타일과 애니메이션 속성을 수정하여 다양한 회전 및 크기 조정 효과를 얻을 수 있습니다.

요약

CSS 애니메이션은 웹 페이지에서 다양한 대화형 효과를 얻는 데 도움이 됩니다. 이 튜토리얼에서는 CSS를 사용하여 회전 및 크기 조정 효과를 얻는 방법을 단계별로 설명합니다. 본 튜토리얼을 통해 기본적인 CSS 애니메이션 기술을 익히고 실제 프로젝트에 적용할 수 있기를 바랍니다. CSS 애니메이션 기술과 방법에 대해 더 자세히 알고 싶다면 계속해서 심도 있게 공부하시기 바랍니다. 놀라운 CSS 애니메이션을 작성하는 데 행운을 빕니다!

위 내용은 CSS 애니메이션 튜토리얼: 회전 및 확대/축소 효과를 구현하는 방법을 단계별로 가르쳐줍니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사