withaarzoo / animated-clock

This project is a simple animated clock created using HTML and CSS. It displays an analog clock with rotating hour, minute, and second hands.

Animated Clock

This project is a simple animated clock created using HTML and CSS. It displays an analog clock with rotating hour, minute, and second hands .

Preview

Features

• Displays an analog clock with rotating hands to indicate the current time.
• The hour hand completes one rotation every 12 hours, the minute hand completes one rotation every hour, and the second hand completes one rotation every minute.
• The clock face has a stylish design with a gradient background and subtle shadow effects.

Technologies Used

• HTML
• CSS

How to Use

1. Clone this repository to your local machine using git clone.
2. Open the index.html file in a web browser.
3. Observe the animated clock showing the current time.

Code Overview

HTML Structure

The HTML file (index.html) contains the basic structure of the web page with a div element representing the clock face. Inside this div, there are p elements for the clock indices and div elements for the hour, minute, and second hands.

CSS Styling

The CSS file (style.css) provides the styles for the clock and its components. It sets the position, size, and appearance of the clock face and hands. Keyframe animations (@keyframes) are used to rotate the hands continuously, simulating the passage of time.

Credits

This project was created by Aarzoo and is licensed under the MIT License. Feel free to use and modify this code for your projects. If you found it helpful, consider giving it a star on GitHub.

License

This project is licensed under the MIT License. See the LICENSE file for details.