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

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

WBOY

풀어 주다： 2023-10-20 14:27:12

원래의

1493명이 탐색했습니다.

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

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

키프레임에서는 5개 시점의 스타일 변경을 설정했습니다. 0%는 애니메이션의 시작 상태를 나타내고, 100%는 애니메이션의 종료 상태를 나타냅니다. 25%, 50%, 75%는 각각 서로 다른 시점의 애니메이션의 중간 상태를 나타냅니다. transform 속성과 translate 기능을 사용하면 요소를 수평 및 수직으로 배치하여 떨림 효과를 얻을 수 있습니다.

마지막으로 위 코드를 style.css 파일로 저장하고 HTML 파일과 연결해야 합니다. 그런 다음 브라우저에서 흔들리는 효과를 볼 수 있습니다.

위는 떨리는 특수 효과를 만들기 위한 전체 단계입니다. 필요에 따라 애니메이션 지속 시간, 변위, 색상 등의 매개변수를 조정하여 웹 디자인에 더욱 적합하게 만들 수 있습니다. 🎜🎜요약하자면 CSS 애니메이션 기술은 웹 디자이너에게 애니메이션 효과를 얻을 수 있는 간단하고 강력한 방법을 제공합니다. 관련 기술과 도구를 익히면 웹 페이지에 다양한 애니메이션 효과를 쉽게 추가하여 사용자 경험을 향상시키고 사용자의 관심을 끌 수 있습니다. 이 글이 여러분에게 도움이 되기를 바라며, 여러분이 웹 디자인의 길에서 더욱 더 나아가길 바랍니다! 🎜

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