Hello Everyone, Today I will implement a frosted glass effect clock using simple HTML, CSS and write some JS code for the real flavor of this beautiful clock.
Let’s start :
Live Demo Link:https://9034s.csb.app/
Codesandbox Link: https://codesandbox.io/s/frosting-glass-clock-9034s-9034s?from-embed
Let’s See the Design:
The below design is the final output that you will get as the final result of this content.
To make this blurry effect clock you just need a parent class name clock and some subclass like an hour, minute, seconds. Here, I use a common class name hand to minimize some CSS. I put some common CSS properties in this class and then call in all subclasses.
Here is the HTML code:
<div class="clock"> <img src="https://dl.dropbox.com/s/f3b3lyanili7zl2/clock%20template-01.svg?raw=1" /> <div class="hour hand" id="hour"></div> <div class="minute hand" id="minute"></div> <div class="seconds hand" id="seconds"></div> </div>