순수 CSS를 사용하여 지속적으로 회전하는 애니메이션을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

순수 CSS를 사용하여 지속적으로 회전하는 애니메이션을 만드는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-11-05 10:24:02

원래의

498명이 탐색했습니다.

How to create a continuously rotating animation using pure CSS?

CSS를 사용한 끝없는 회전 애니메이션

요청:

pure를 사용하여 로딩 아이콘을 무기한 회전 CSS.

코드:

<code class="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;
}</code>

로그인 후 복사

문제:

제공된 코드는 다음과 같이 회전 애니메이션을 시작하지 않습니다. 예상됩니다.

해결책:

CSS를 사용하여 연속 회전을 구현하려면 애니메이션을 사용해야 합니다. 이 경우 @keyframes 규칙을 사용하여 애니메이션을 정의하고 애니메이션 CSS 속성을 적용하여 적용합니다.

업데이트 코드:

<code class="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;
}</code>

로그인 후 복사

이 업데이트 코드 2초 동안 360도 회전하는 회전 애니메이션을 정의합니다. 무한 반복 횟수 설정을 통해 애니메이션이 무한정 반복됩니다.

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