🌟 Introduction
Have you ever wanted to create a clock that does more than just tell time? What if every second that ticks by could bring a fresh new theme? With CSS @property and the power of hsl() color manipulation, you can! In this article, I'll walk you through the creating process of a dynamic and visually engaging "Theme Clock" that changes its colors (aka its theme) every second, bringing a new life to each moment!.
🕰️ The Concept
The idea behind the "Theme Clock" is simple yet captivating: as time passes, the clock’s appearance changes. We’ll leverage CSS custom properties to animate the hue of colors (well it's an angle in degrees) and update the clock's theme every second (also for every minute and hour as wel). The result? A seamless, ever-changing clock that is as mesmerizing as it is functional.
💻 Demo & Code
Well, here’s the full code for the "Theme Clock." I'll break it down to understand how each part contributes to the overall effect.
🧩 Breaking Down the Code
1.CSS Custom Properties and @property: The magic behind this theme-changing clock lies in the use of CSS custom properties and the @property rule. We define a custom property --angle that controls the hue of the clock’s colors using the hsl() function. By animating this property over 60 seconds with the @keyframes rule, we achieve a continuous color transition.
- Custom Property --angle: This controls the hue of the hsl() color, dynamically changing the theme. and also makes the custom property animatable, allowing smooth transitions.
- CSS @keyframes anim: This animation rotates the hue value from 0 to 360 over 60 seconds, cycling through the entire color spectrum.
2.Dynamic Theme Switching: The toggle button allows users to switch between light and dark themes. The button click toggles a dark class on the html element, altering the clock’s appearance.
- Light/Dark Mode Toggle: The theme can be switched with a button that dynamically updates the clock’s appearance.
- Container Rotation Animation: The clock container spins when the theme changes, adding a subtle transition effect.
3.Clock and Time Update: The JavaScript portion of the code handles the updating of the clock’s hands and the digital time display. The setTime function recalculates the positions of the hour, minute, and second hands every second, while also updating the time and date display.
- "scale" Function: Converts the current time into corresponding degrees for the clock hands rotation.
- Real-Time Updates: The clock hands and digital time are updated every second to match the current time.
🚀 Bringing All parts together
By combining the power of CSS custom properties, hsl() color manipulation, and the @property rule, we've created a clock that not only tells time but also evolves in appearance with every passing second. This project is a great example of how CSS can be used to create interactive and visually appealing web elements with minimal JavaScript.
Drop a like ❤️, and Follow for more alishata128
Top comments (0)