Clock Animation

AI Overview: Clock Animation

This project is a visual simulation of a modern analog watch interface created using HTML and CSS. Its primary purpose is to demonstrate how complex UI components—like watch hands, tick marks, and decorative complications—can be built and animated without the need for external images or heavy JavaScript. The interface includes a functional second hand, a date display, a meeting alert, and a moon phase sub-dial.

The project works by layering several circular containers to create depth. The .watch-case provides the outer frame with a metallic gradient, while the .watch-center acts as the dial. The 60 tick marks around the edge are generated using 60 individual <i> elements, which are positioned using CSS rotations to form a perfect circle.

The animation logic is handled entirely through CSS @keyframes. The second hand is programmed to rotate 360 degrees continuously, while the meeting alert uses a pulsing glow effect to catch the user's eye. The hour and minute hands are currently set to static positions using transforms, but they are structured to be easily controlled by code.

Key Code Snippets

1. Centering the Watch Hands
This CSS ensures that all watch hands are anchored at the center of the dial and rotate from their bottom edge rather than their middle.

.watch-tips span {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  background: black;
  border-radius: 2px;
}

2. The Second Hand Animation
This snippet defines a smooth, linear rotation that takes exactly 60 seconds to complete a full circle.

@keyframes rotate-second {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

3. Creating the Tick Marks
The HTML uses 60 empty italic tags to represent every minute and second marker on the watch face.

<div class="watch-points">
  <!-- 60 small tick marks -->
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  <!-- ... repeated for 60 marks -->
</div>

4. The Alert Glow Effect
To make the "Meeting" notification stand out, this animation creates a pulsing red shadow that changes size over two seconds.

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 5px red;
  }
  50% {
    text-shadow: 0 0 15px red;
  }
}