CSS 를 활용한 펄스 효과 로더 애니메이션 제작 | 웹 개발

소개

이 랩에서는 CSS 를 사용하여 펄스 효과 로더 애니메이션을 만드는 방법을 배웁니다. animation-delay 속성을 사용하여 리듬 효과를 만들고, @keyframes를 사용하여 사이클의 두 지점에서 애니메이션을 정의합니다. 이 랩을 마치면 웹 페이지의 사용자 경험을 향상시킬 수 있는 매력적인 애니메이션을 만드는 방법에 대한 이해를 높일 수 있습니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

펄스 로더 (Pulse Loader)

index.html 및 style.css는 이미 VM 에 제공되어 있습니다.

animation-delay 속성을 사용하여 펄스 효과 로더 애니메이션을 만들려면 다음 단계를 따르세요.

@keyframes를 사용하여 두 개의 <div> 요소에 대한 애니메이션을 정의합니다. 두 요소 모두 시작점 (0%) 에서 width 또는 height가 없고 중앙에 위치하도록 설정합니다. 종료점 (100%) 에서는 두 요소 모두 width와 height가 증가하지만 position을 0으로 재설정합니다.
opacity를 사용하여 애니메이션 시 1에서 0으로 전환하여 <div> 요소가 확장되면서 사라지는 효과를 줍니다.
부모 컨테이너인 .ripple-loader에 미리 정의된 width와 height를 설정합니다. 자식 요소를 배치하기 위해 position: relative를 사용합니다.
두 번째 <div> 요소에 animation-delay를 사용하여 각 요소가 서로 다른 시간에 애니메이션을 시작하도록 합니다.

다음은 이를 구현하기 위한 HTML 및 CSS 코드입니다.

<div class="ripple-loader">
  <div></div>
  <div></div>
</div>

.ripple-loader {
  position: relative;
  width: 64px;
  height: 64px;
}

.ripple-loader div {
  position: absolute;
  border: 4px solid #454ade;
  border-radius: 50%;
  animation: ripple-loader 1s ease-out infinite;
}

.ripple-loader div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes ripple-loader {
  0% {
    top: 32px;
    left: 32px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    opacity: 0;
  }
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하세요. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 펄스 로더 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.

CSS 펄스 로더 애니메이션 제작

소개

펄스 로더 (Pulse Loader)

요약