문제:
제공된 코드인 CSS를 사용하여 로딩 아이콘을 계속 회전시키려는 경우 원하는 애니메이션을 제작하지 못했습니다. CSS를 사용하여 이 회전을 효과적으로 수행하려면 어떻게 해야 합니까?
해결책:
CSS를 사용하여 무한 회전을 수행하려면 다음 단계를 수행하십시오.
CSS 애니메이션 키프레임 추가:
대상 요소에 애니메이션 적용:
공급업체 접두사 포함:
예제 코드:
<code class="css">@-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 2s linear infinite; animation: rotating 2s linear infinite; }</code>
Html:
<code class="html"><div class="rotating" style="width: 100px; height: 100px; line-height: 100px; text-align: center;" >Rotate</div></code>
이 수정된 코드는 끝없는 반복으로 요소의 지속적인 회전을 보장하여 이전 시도에서 직면한 문제를 해결합니다.
위 내용은 끝없는 CSS 회전 애니메이션을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!