Analog Clock Html Css Codepen

MUAZHAN

4 min read

·

Jul 03, 2024

29

Share

Membuat Jam Analog dengan HTML, CSS, dan CodePen

Artikel ini akan memandu Anda dalam membuat jam analog sederhana menggunakan HTML, CSS, dan CodePen. Anda akan belajar tentang cara membuat desain jam, menggerakkan jarum jam, menit, dan detik menggunakan CSS animation, serta mengintegrasikannya ke dalam CodePen.

1. Struktur HTML

Pertama, kita perlu membuat struktur HTML dasar untuk jam analog kita. Kita akan menggunakan elemen <div> untuk wadah jam dan jarumnya.

2. Styling CSS

Sekarang, kita akan mendesain jam analog dengan CSS. Kita akan menggunakan transform dan rotate untuk memutar jarum jam, menit, dan detik.

.clock {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #f0f0f0;
  position: relative;
  margin: 100px auto;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

.hour, .minute, .second {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
}

.hour {
  width: 8px;
  height: 80px;
  background-color: black;
  transform: translateX(-50%) rotate(0deg);
}

.minute {
  width: 6px;
  height: 100px;
  background-color: black;
  transform: translateX(-50%) rotate(0deg);
}

.second {
  width: 2px;
  height: 120px;
  background-color: red;
  transform: translateX(-50%) rotate(0deg);
}

.center {
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. Animasi CSS

Langkah terakhir adalah menambahkan animasi CSS untuk menggerakkan jarum jam. Kita akan menggunakan animation dan keyframes untuk mengontrol rotasi jarum.

@keyframes rotateHour {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}

@keyframes rotateMinute {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}

@keyframes rotateSecond {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}

.hour {
  /* ... */
  animation: rotateHour 12h linear;
}

.minute {
  /* ... */
  animation: rotateMinute 60min linear;
}

.second {
  /* ... */
  animation: rotateSecond 60s linear;
}

4. Integrasi ke CodePen

Sekarang, Anda dapat menyalin kode HTML, CSS, dan JavaScript ke CodePen. Anda dapat mengubah desain, ukuran, dan warna jam sesuai keinginan Anda.

Berikut adalah beberapa tips tambahan:

• Anda dapat menambahkan angka jam di sekitar jam menggunakan elemen <div> dan CSS.
• Anda dapat menggunakan JavaScript untuk memperbarui waktu dan mengatur rotasi jarum jam secara real-time.
• Anda dapat menambahkan efek visual tambahan, seperti bayangan atau gradien, untuk meningkatkan tampilan jam.

Berikut adalah contoh kode lengkap di CodePen: (Ganti link dengan link CodePen Anda)

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat jam analog sederhana menggunakan HTML, CSS, dan CodePen. Sekarang, Anda dapat bereksperimen dengan berbagai desain dan fitur untuk membuat jam analog Anda sendiri!