CSS 애니메이션 튜토리얼: 회전 및 확대/축소 효과를 구현하는 방법을 단계별로 가르쳐줍니다.
- PHPz원래의
- 2023-10-18 10:22:481742검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!