CSS 애니메이션 가이드: 흔들리는 효과를 만드는 방법을 단계별로 가르쳐줍니다.
웹 디자인에서 애니메이션 효과는 페이지에 생동감 있고 대화형 느낌을 더할 수 있습니다. CSS 애니메이션은 웹 페이지에 CSS 규칙을 적용하여 애니메이션 효과를 구현하는 기술입니다. 일반적인 애니메이션 효과 중 하나인 Shake 효과는 요소에 흔들리는 애니메이션 효과를 추가하고 웹 페이지에 활력을 더할 수 있습니다. 이 문서에서는 처음부터 시작하여 흔들리는 효과를 만드는 방법을 단계별로 설명하고 특정 코드 예제를 제공합니다.
1단계: HTML 구조 만들기
먼저 HTML 파일에서 "흔들기"라고 가정되는 요소를 만들어야 합니다.
<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 파일의