Cara Membuat Simulasi Traffic Light dengan HTML dan CSS

 Lampu lalu lintas (traffic light) adalah salah satu contoh animasi sederhana yang bisa dibuat dengan HTML dan CSS. Dengan kombinasi @keyframes dan animation, kita bisa membuat lampu merah, kuning, dan hijau menyala bergantian secara otomatis.

Pada artikel ini, kita akan membuat simulasi traffic light yang terdiri dari:

• Kotak lampu berisi 3 lingkaran (merah, kuning, hijau).

• Animasi nyala bergantian tiap 5 detik.

• Tambahan tiang dan alas agar mirip lampu lalu lintas asli

1. Struktur HTML

Pertama, buat file baru dengan nama traffic_light.html



2. Desain dengan CSS

Selanjutnya, buat file style.css untuk mengatur tampilan dan animasi.

3. Hasil Akhir

Jika kamu buka file traffic_light.html di browser, maka lampu akan:

1. Menyala merah selama 5 detik.

2. Menyala kuning selama 5 detik.

3. Menyala hijau selama 5 detik.

4. Kembali lagi ke merah, dan seterusnya.

Ditambah dengan tiang dan alas, tampilannya akan menyerupai traffic light asli. 🚦

4. Pengembangan Lanjutan

Beberapa ide pengembangan:

• Tambahkan JavaScript untuk mengatur waktu lebih fleksibel (misalnya merah 10 detik, hijau 7 detik, kuning 3 detik).

• Buat lebih interaktif dengan tombol Start dan Stop.

• Tambahkan suara atau teks "STOP", "READY", "GO".
  

Sourcecode download di sini