CSS 애니메이션 가이드: 흔들리는 효과를 만드는 방법을 단계별로 안내합니다.

CSS 애니메이션 가이드: 흔들리는 효과를 만드는 방법을 단계별로 가르쳐줍니다.

웹 디자인에서 애니메이션 효과는 페이지에 생동감 있고 대화형 느낌을 더할 수 있습니다. CSS 애니메이션은 웹 페이지에 CSS 규칙을 적용하여 애니메이션 효과를 구현하는 기술입니다. 일반적인 애니메이션 효과 중 하나인 Shake 효과는 요소에 흔들리는 애니메이션 효과를 추가하고 웹 페이지에 활력을 더할 수 있습니다. 이 문서에서는 처음부터 시작하여 흔들리는 효과를 만드는 방법을 단계별로 설명하고 특정 코드 예제를 제공합니다.

1단계: HTML 구조 만들기
먼저 HTML 파일에서 "흔들기"라고 가정되는 요소를 만들어야 합니다.

태그로 래핑하고 "shake-element"와 같은 고유 ID 속성을 추가할 수 있습니다. 다음은 샘플 코드입니다.

<div id="shake-element">
  这里是要添加抖动特效的内容
</div>

2단계: CSS 스타일 정의
다음으로 CSS 스타일을 정의하여 요소에 지터 효과를 추가해야 합니다. 요소의 시작 위치를 정의한 다음 키프레임 애니메이션 효과를 적용하여 지터 효과를 만들어 보겠습니다. 다음은 샘플 CSS 스타일 코드입니다.

#shake-element {
  position: relative;
  animation: shake-animation 1s infinite;
}

@keyframes shake-animation {
  0% { transform: translateX(0); }
  10% { transform: translateX(-10px); }
  20% { transform: translateX(10px); }
  30% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  50% { transform: translateX(-10px); }
  60% { transform: translateX(10px); }
  70% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
  90% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

이 CSS 코드에서는 먼저 요소의 가로 번역을 제어하기 위해 요소의 position: relative来确保其相对于原始位置进行抖动。然后，通过关键帧动画@keyframes来定义抖动动画的具体效果。在关键帧动画中，每个百分比定义了元素的不同位置，通过transform: translateX() 속성을 설정했습니다. 이 예에서는 요소의 지터 위치를 제어하는 ​​데 10%의 시간을 사용합니다.

3단계: CSS 스타일 적용
마지막 단계에서는 정의된 CSS 스타일을 HTML 요소에 적용해야 합니다. 즉, 태그의 ID 속성을 통해 이를 선택하고 CSS 스타일을 참조해야 합니다. HTML 파일의

태그에서

위 내용은 CSS 애니메이션 가이드: 흔들리는 효과를 만드는 방법을 단계별로 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!