Berikut adalah contoh kode untuk membuat animasi ON dan OFF pada lampu menggunakan CSS, HTML, dan JavaScript
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.lampu {
width: 100px;
height: 100px;
background-color: gray;
border-radius: 50%;
position: relative;
animation: lampu-on 1s infinite;
}
@keyframes lampu-on {
0% {
background-color: gray;
}
50% {
background-color: yellow;
}
100% {
background-color: gray;
}
}
.btn-on {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="lampu"></div>
<button class="btn-on" onclick="toggleLamp()">ON/OFF</button>
<script>
function toggleLamp() {
var lampu = document.querySelector('.lampu');
lampu.style.animationPlayState = lampu.style.animationPlayState === 'paused' ? 'running' : 'paused';
}
</script>
</body>
</html>Output:
See the Pen Animasi ON dan OFF pada Lampu dengan JavaScript by WebbizID (@De-Orchids) on CodePen.
Silakan salin kode di atas ke dalam file HTML dan jalankan di browser untuk melihat animasi ON dan OFF pada lampu. Ketika tombol “ON/OFF” ditekan, animasi akan berhenti dan melanjutkan kembali.
Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat animasi ON dan OFF pada lampu menggunakan CSS, HTML, dan JavaScript.
Leave a Reply