아이콘 로딩을 위한 끝없는 CSS 회전 애니메이션을 만드는 방법은 무엇입니까?

끝없는 CSS 회전 애니메이션

로딩 아이콘은 사용자 경험에 필수적이며 웹사이트 로딩 중에 시각적 피드백을 제공합니다. CSS를 사용하여 이러한 아이콘의 회전을 사용자 정의하면 기능과 미학을 향상시킬 수 있습니다. 그러나 CSS를 사용하여 무한 회전을 구현하는 것은 어려울 수 있습니다.

다음 예를 고려해 보세요.

#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

<div id='test' class='rotating'></div>

이 CSS는 직관적으로 보이지만 로딩 아이콘입니다. 무한 회전을 달성하려면 변환 대신 키프레임을 사용하여 애니메이션을 적용해야 합니다.

키프레임을 사용하여 수정된 CSS는 다음과 같습니다.

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

이 수정된 코드는 로딩 아이콘의 부드럽고 지속적인 회전을 보장합니다. 무한히 기능과 시각적 매력을 강화합니다.

위 내용은 아이콘 로딩을 위한 끝없는 CSS 회전 애니메이션을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!