CSS3에서 로딩 애니메이션 효과를 구현하는 방법

오늘은 CSS3를 사용하여 로딩 애니메이션 효과를 만드는 방법을 가르쳐 드리겠습니다. 애니메이션 효과를 만들기 위해 Loadning을 사용해야 하는 이유는 무엇입니까? 이 내용을 읽고 나면 모든 혼란이 사라질 것이라고 믿습니다.

첫 번째 단계는 정적 작은 국화를 그리는 것입니다.

sk-fading-circle {
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
}
 
<div class="sk-fading-circle">
  <div class="sk-circle"></div>
  … //为缩减篇幅省略中间10个div
  <div class="sk-circle"></div>
</div>

코드는 위와 같습니다. 정적 국화는 실제로 외부 div에 중첩된 12개의 작은 div입니다. 작은 div는 border-radius를 사용하여 원으로 그려지고 margin: 0 auto;를 사용하여 상단 그리드의 중앙에 배치됩니다. 12개의 작은 div는 절대 위치에 있으므로 모두 겹칩니다.

두 번째 단계는 12개의 겹쳐진 원을 펼치는 것입니다.

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}
.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}
… //节省篇幅，每个圆每隔30度递增旋转
.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}
 
<div class="sk-fading-circle">
  <div class="sk-circle1 sk-circle"></div>
  … //为缩减篇幅省略中间10个div
  <div class="sk-circle12sk-circle"></div>
</div>

코드는 위와 같습니다. 변환의 회전을 사용하여 각 점을 회전시켜 완전한 국화 모양을 만듭니다. 변형에 익숙하지 않은 경우 아래 그림을 보시면 두 번째 점이 30도 회전되어 있음을 알 수 있습니다.

세 번째 단계는 애니메이션을 통해 불투명도 속성을 제어하는 ​​것입니다. 각 점이 페이드 인 및 아웃되도록

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
.sk-fading-circle .sk-circle:before {
  ……
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

각 점이 신호등처럼 동시에 깜박이도록 합니다.

마지막 단계는 각 점의 애니메이션 지연을 설정하여 깜박이는 시간에 시차를 두고 일반적인 국화 회전 효과를 형성하는 것입니다

.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }
.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }
.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }
… //为缩减篇幅省略中间代码
.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }

12개의 점이 있으므로 각 점의 깜박임 간격은 0.1초이므로 첫 번째 점이 애니메이션 지연이 없으며 즉시 깜박입니다. 두 번째 점은 -1.1초부터 깜박이기 시작합니다. (음수를 이해하지 못하는 경우 애니메이션 기사를 참조하세요. 이는 이 시점부터 시작되며 이전 애니메이션 효과가 표시되지 않는다는 의미입니다.) 그 이후에는 각 도트가 0.1초씩 지연됩니다. 드디어 일반적인 국화 돌리기 로딩 효과가 형성되었습니다

이 사례 연구를 통해 로딩을 사용하여 애니메이션 효과를 만드는 방법을 완벽하게 마스터했다고 믿습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

캔버스를 사용하여 공과 마우스 사이의 상호 작용을 구현하는 방법

캔버스를 사용하여 입자 분수 애니메이션 효과를 만드는 방법

css3 파급 효과를 표시하려면 클릭하세요

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