Berikut adalah contoh kode untuk membuat animasi ON dan OFF pada lampu menggunakan CSS, HTML, dan JavaScript

Animasi ON dan OFF pada Lampu dengan JavaScript

—

by

Webbiz.ID
in

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>
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.

Artikel Terbaru ⭐