추천 과정:
어떻게 만들까요: 애니메이션 아이콘
아이콘을 사용하여 애니메이션 효과를 만들어보세요.
배터리 충전
첫 번째 단계 - HTML 추가:
<div id="charging" class="fa"></div>
두 번째 단계 - Font Awesome 아이콘 라이브러리 포함:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Font Awesome 교본 우리의
Font Awesome에 대해 더 많은 정보를 알아보세요.
세 번째 단계 - JavaScript 추가:
<script>
function chargebattery() {
var a;
a = document.getElementById("charging");
}, 3000);
a.innerHTML = "";
a.innerHTML = "";
}, 3000);
}, 1000);
a.innerHTML = "";
}, 3000);
}, 2000);
a.innerHTML = "";
}, 3000);
setTimeout(function () {
a.innerHTML = "";
}, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>
예제 설명:
이 예제는 배터리가 충전 중인 것처럼 보이지만 실제로는 다섯 가지 다른 아이콘을 표시합니다. chargebattery() 모든 아이콘의 대체와 표시를 담당하는 함수입니다.
이 함수는 빈 배터리 아이콘을 먼저 표시합니다:
1초 후, 아이콘은 새로운 아이콘으로 대체됩니다:
초마다 새로운 아이콘으로 현재 아이콘을 대체하고, "배터리가 완전히 충전됨"까지 계속됩니다:
이 과정은 5초마다 반복되어 배터리가 충전 중인 것처럼 느껴집니다.
