방법 - 아이콘 애니메이션
아이콘을 사용하여 애니메이션 효과를 만드는 방법을 배웁니다.
배터리 충전
1단계) HTML 추가:
예시
<div id="charging" class="fa"></div>
2단계) 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에 대해 자세히 알아보세요 .
3단계) 자바스크립트 추가:
예시
<script>
function chargebattery() {
var a;
a = document.getElementById("charging");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
setTimeout(function () {
a.innerHTML = "";
}, 3000);
setTimeout(function () {
a.innerHTML = "";
}, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>
예시 설명
이 예에서는 배터리가 충전되는 느낌을 주지만 대신 5개의 다른 아이콘이 표시됩니다.
라는 함수 chargebattery()
는 아이콘의 모든 교체 및 표시를 수행합니다.
이 기능은 빈 배터리 아이콘을 표시하여 시작합니다.
1초 후에 아이콘이 새 아이콘으로 바뀝니다.
아이콘은 "배터리가 완전히 충전"될 때까지 매초 새 아이콘으로 바뀝니다.
이 과정이 5초마다 반복되어 배터리가 충전되는 것처럼 보입니다.
더 많은 애니메이션 아이콘
예시
예시
예시
예시
예시
예시