CSS 웹 페이지 로딩 애니메이션: 다양한 멋진 로딩 애니메이션 효과 만들기

사용자가 웹페이지에 들어갈 때 가장 조급한 일은 페이지가 로드되기를 기다리는 것입니다. 사용자의 불안을 완화하기 위해 많은 웹사이트에서는 페이지 로딩을 더욱 흥미롭게 만들기 위해 CSS 로딩 애니메이션을 사용하기 시작했습니다. 이 기사에서는 CSS를 사용하여 다양한 멋진 로딩 애니메이션 효과를 만드는 방법을 배우고 이를 구현하는 데 도움이 되는 구체적인 코드 예제를 제공합니다.

1. 기본 애니메이션

먼저 기본 로딩 애니메이션을 만들어 보겠습니다. CSS의 animation 속성을 사용하여 기본 애니메이션을 만들 수 있습니다. 애니메이션 속성에는 다음과 같은 여러 하위 속성이 있습니다.

• animation-name: 적용할 키프레임 규칙의 이름을 선택합니다.
• animation-duration: 주기의 지속 시간을 정의합니다(초 또는 밀리초 단위).
• animation-timing-function: 사이클 속도 곡선을 정의합니다.
• animation-delay: 주기의 지연 시간을 정의합니다.
• animation-iteration-count: 애니메이션이 재생되어야 하는 횟수를 정의합니다.

이제 몇 가지 기본 로딩 애니메이션 유형을 살펴보겠습니다.

1. 회전 애니메이션

이 로딩 애니메이션에서는 다음 코드를 사용하여 회전 키프레임을 정의합니다.

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  
  to {
    transform: rotate(360deg);
  }
}

위 코드는 @keyframes 규칙을 사용하여 "rotate"라는 키프레임을 정의합니다. 이 키프레임에서는 변환 속성을 사용하여 회전을 정의합니다. from 및 to에서는 회전 각도를 0도에서 360도까지 정의합니다.

다음으로 "로더" 요소에 대해 이 애니메이션을 지정해야 합니다.

.loader {
  animation-name: rotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. 깜박임 애니메이션

이 로딩 애니메이션에서는 다음 코드를 사용하여 반복 깜박이는 키프레임을 정의합니다.

@keyframes blink {
  50% {
    opacity: 0.5;
  }
}

위의 코드는 다음을 사용합니다. "blink"라는 키프레임을 정의하는 @keyframes 규칙. 이 키프레임에서는 불투명도 속성을 사용하여 요소의 투명도를 정의합니다. 50%에서는 0.5로 설정하여 두 상태 사이를 순환하게 됩니다.

이 애니메이션을 "로더" 요소에 적용하려면 다음 코드를 사용하세요.

.loader {
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

II. 고급 애니메이션

CSS에서 기본 로딩 애니메이션을 만드는 방법을 배웠으니 이제 더 많은 고급 애니메이션을 만드는 방법을 자세히 살펴보겠습니다. 애니메이션. 다음은 멋진 로딩 애니메이션과 해당 코드 예제입니다.

1. 웨이브 애니메이션

이 로딩 애니메이션에서는 다음 코드를 사용하여 웨이브 모드의 키프레임을 정의합니다.

@keyframes wave {
  0% {
    transform: translateX(0) translateY(0);
  }
  
  50% {
    transform: translateX(30px) translateY(15px);
  }
  
  100% {
    transform: translateX(0) translateY(0);
  }
}

위 코드에서는 변환 속성을 사용하여 웨이브 효과를 만듭니다. 0% 및 100% 위치에서는 요소를 초기 위치로 설정합니다. 50% 위치에서 TranslateX(수평 이동) 및 TranslateY(수직 이동)를 사용하여 파형을 생성합니다.

다음으로 "로더" 요소에 대해 이 애니메이션을 지정합니다.

.loader {
  animation-name: wave;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

2. 확산 애니메이션

이 로딩 애니메이션에서는 다음 코드를 사용하여 확산 키프레임을 정의합니다.

@keyframes spread {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  
  50% {
    transform: scale(1);
    opacity: 0.1;
  }
  
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
}

위 코드에서 확산 효과를 생성하는 변환 속성. 0%와 100%에서는 요소를 최소화 및 투명도의 초기 값으로 설정합니다. 50% 위치에서 scale 속성을 사용하여 확산 애니메이션을 만듭니다.

다음으로 "로더" 요소에 대해 이 애니메이션을 지정합니다.

.loader {
  animation-name: spread;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

요약

CSS를 사용하면 웹사이트에 대한 다양한 유형의 로딩 애니메이션을 만들 수 있습니다. 이러한 로딩 애니메이션은 페이지 로딩을 더욱 흥미롭게 만들고 사용자의 대기 불안을 덜어줄 수 있습니다. 이 기사에서는 몇 가지 기본 로딩 애니메이션을 만드는 방법과 고급 애니메이션을 만드는 방법을 배웠습니다. 이 코드 예제가 귀하의 작업에 도움이 되기를 바랍니다.

위 내용은 CSS 웹 페이지 로딩 애니메이션: 다양한 멋진 로딩 애니메이션 효과 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!