CSS로 간단한 로딩 효과를 구현하는 방법-프런트엔드 Q&A-php.cn

CSS로 간단한 로딩 효과를 구현하는 방법

PHPz

풀어 주다： 2023-04-26 16:16:14

원래의

3476명이 탐색했습니다.

프런트엔드 개발에서 로딩은 매우 일반적인 기능입니다. 웹페이지 데이터가 로드되면 사용자 경험이 향상되기를 기다리는 동안 사용자에게 시각적 피드백을 제공할 수 있기를 바랍니다. 이번 글에서는 CSS를 통해 간단한 Loading 효과를 구현해 보겠습니다.

1. 애니메이션 애니메이션을 사용하여 Loading 구현

애니메이션은 CSS3의 새로운 모듈로, 매우 복잡한 애니메이션 효과를 만드는 데 사용할 수 있습니다. 여기서는 애니메이션을 사용하여 로딩 효과를 만듭니다.

먼저 HTML에 로딩 효과를 위한 컨테이너를 추가합니다:

<div class="loading">
  <div class="loading-circle"></div>
  <div class="loading-circle"></div>
  <div class="loading-circle"></div>
</div>

로그인 후 복사

다음으로 "원"을 회전하기 위해 CSS에서 키프레임 애니메이션을 정의합니다.

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

로그인 후 복사

그런 다음 .loading-circle 클래스의 스타일을 지정하여 원으로 만들고 그 안에 위에서 정의한 애니메이션을 사용합니다.

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

로그인 후 복사

마지막으로 컨테이너의 스타일을 .css-loading에서 페이지 중앙에 맞추고 "원"의 위치와 크기가 적절하게 지정되도록 합니다.

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

로그인 후 복사

전체 구현 코드는 다음과 같습니다.

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

로그인 후 복사

2. Transition을 사용하여 Loading 구현

애니메이션 외에도 CSS에서 Transition을 사용하여 Loading 효과를 얻을 수도 있습니다.

또한 로딩의 표시 영역으로 HTML에 컨테이너를 추가합니다:

<div class="loading-2">
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
</div>

로그인 후 복사

CSS에서는 .loading-circle-2 클래스의 초기 상태와 최종 상태를 정의하고 전환을 사용하여 상태 간 부드러움을 달성합니다. 이행.

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

로그인 후 복사

마지막으로 페이지 중앙에 오도록 .loading-2 요소의 스타일을 지정합니다.

전체 구현 코드는 다음과 같습니다.

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.loading-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

로그인 후 복사

3. 요약

이 문서에서는 CSS를 사용하여 두 가지 방법을 통해 로딩 효과를 얻는 방법을 보여줍니다. 애니메이션은 상대적으로 복잡하지만 매우 풍부하고 다양한 애니메이션 효과를 만들어 낼 수 있습니다. 전환은 더 간결하고 이해하기 쉬우며 몇 가지 간단한 애니메이션을 구현할 수 있습니다.

일반적으로 CSS를 사용하여 Loading을 구현하는 것은 상대적으로 간단한 방법으로 사용자 경험을 효과적으로 향상시킬 수 있습니다. 물론 실제 개발에서는 프로젝트의 실제 요구 사항에 따라 일부 조정과 스타일 최적화가 필요할 수도 있습니다.

위 내용은 CSS로 간단한 로딩 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!