CSS 애니메이션 가이드: 흔들리는 특수 효과를 만드는 방법을 단계별로 가르칩니다.
웹 디자인에서 애니메이션 효과는 사용자 경험을 개선하고 사용자의 관심을 끄는 중요한 요소 중 하나입니다. CSS 애니메이션은 순수 CSS를 사용하여 애니메이션 효과를 구현하는 기술입니다. 오늘은 웹 페이지를 더욱 생생하고 흥미롭게 만들기 위해 놀라운 흔들림 효과를 만드는 방법을 단계별로 가르쳐 드리겠습니다.
먼저 기본 HTML 구조를 만들어 보겠습니다. 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <title>CSS动画指南</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"></div> </body> </html>
다음으로 CSS 파일(여기서는 style.css로 가정)에 관련 스타일 및 애니메이션 정의를 추가해야 합니다. 코드는 다음과 같습니다.
.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: shake 0.5s infinite;
}
@keyframes shake {
0% {
transform: translate(0);
}
25% {
transform: translate(-10px, -10px);
}
50% {
transform: translate(10px, 10px);
}
75% {
transform: translate(-10px, -10px);
}
100% {
transform: translate(0);
}
}위 코드에서는 .box 요소에 0.5초 애니메이션 효과를 추가하고 애니메이션 이름을 shake로 설정했습니다. 그런 다음 @keyframes 키워드를 통해 shake 애니메이션의 키 프레임을 정의합니다. .box元素添加了一个0.5秒的动画效果，并将动画名称设置为shake。然后，我们通过@keyframes关键字定义了shake动画的关键帧。
在关键帧中，我们设置了五个时间点的样式变化。0%表示动画的起始状态，100%表示动画的结束状态。25%、50%和75%分别表示了动画在不同时间点的中间状态。通过使用transform属性和translate函数，我们可以使元素在水平和竖直方向上产生位移，从而实现颤抖的效果。
最后，我们需要将上述代码保存为style.css
transform 속성과 translate 기능을 사용하면 요소를 수평 및 수직으로 배치하여 떨림 효과를 얻을 수 있습니다. 마지막으로 위 코드를 style.css 파일로 저장하고 HTML 파일과 연결해야 합니다. 그런 다음 브라우저에서 흔들리는 효과를 볼 수 있습니다. 위는 떨리는 특수 효과를 만들기 위한 전체 단계입니다. 필요에 따라 애니메이션 지속 시간, 변위, 색상 등의 매개변수를 조정하여 웹 디자인에 더욱 적합하게 만들 수 있습니다. 🎜🎜요약하자면 CSS 애니메이션 기술은 웹 디자이너에게 애니메이션 효과를 얻을 수 있는 간단하고 강력한 방법을 제공합니다. 관련 기술과 도구를 익히면 웹 페이지에 다양한 애니메이션 효과를 쉽게 추가하여 사용자 경험을 향상시키고 사용자의 관심을 끌 수 있습니다. 이 글이 여러분에게 도움이 되기를 바라며, 여러분이 웹 디자인의 길에서 더욱 더 나아가길 바랍니다! 🎜위 내용은 CSS 애니메이션 가이드: 흔들리는 효과를 만드는 방법을 단계별로 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
클립 경로로 애니메이션Apr 19, 2025 am 09:52 AMClip-Path는 우리가 일반적으로 알고있는 CSS 속성 중 하나이지만 어떤 이유로 든 종종 도달하지 못할 수도 있습니다. 의미가 약간 위협적입니다
Gatsby와 함께 GraphQL 놀이터 사용Apr 19, 2025 am 09:51 AM나는 대부분의 사람들이 이미 개츠비에 대해 들었다고 가정하고 있으며, 적어도 그것이 기본적으로 반응 사이트의 정적 사이트 생성기라는 것을 느슨하게 알고 있습니다. 일반적으로
유형 또는 테스트 : 왜 둘 다 안됩니까?Apr 19, 2025 am 09:50 AM때때로, 토론은 타이핑 된 JavaScript의 가치에 대해 불쾌합니다. "더 많은 테스트를 작성하십시오!" 상대방을 외칩니다. "단위 테스트를 유형으로 교체하십시오!"
자신의 게으른 하중을 굴리기위한 팁Apr 19, 2025 am 09:44 AM“우리는 게으른 짐을 사용할 수 있습니다!”라고 들었을 수도 있습니다. 특히 무거운 웹 페이지를 슬림 한 방법을 찾을 때.
CSS 2019 상태 조사에서 세 가지 예측Apr 19, 2025 am 09:43 AMCSS 상태와 같은 개발자 설문 조사를 실행하는 것은 다단계 프로세스입니다. 먼저 데이터를 수집해야합니다. 그런 다음 사용 가능한 모양으로 처리합니다.
마지막으로 ... 마침내 약속의 게시물Apr 19, 2025 am 09:39 AM"마침내 JavaScript 약속으로 언제 발사됩니까?" 이것은 최근 워크숍에서 묻는 질문이며, 나는 약간의 게시물을 작성하기 위해 작은 게시물을 작성할 것이라고 생각했습니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
SublimeText3 영어 버전
권장 사항: Win 버전, 코드 프롬프트 지원!
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
Dreamweaver Mac版
시각적 웹 개발 도구
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
