Glassmorphism Analog Clock using CSS & JavaScript

Показать описание

Hey everyone 😁 Today, we're going through a fantastic JavaScript project, Glassmorphism Analog Clock using CSS & JS. I bet you've never seen such a design before because I wrote a short & clean JavaScript code and also made it a CSS Glass Morphism design... Watch this video till end and hope you enjoy 😊

📂 Assets
Nothing's used...

🔗 Source code

🔔 Subscribe Now!

⏱ Timestamps
00:00 What are we gonna design ?!
00:44 Circles Elements
00:53 General Styles
01:08 Circles Styles & Animation
03:17 Adding Clock Elements
03:32 Glass Morphism Clock Styles
04:40 Clock Center Styles
05:02 Adding Clock Hands
05:31 Clock Hands Styles
08:14 Activating the Clock using JS
10:01 Adding Move Animations
10:12 Thanks For Watching

🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Thanks for watching, I appreciate it 🙏
Made with 💗 by Hossein

Рекомендации по теме

Комментарии

Lemme know your thoughts about this one 😊

CodeWithHossein

Great work brother I am beginner in html css and javascript and I am love with your all projects!!!! Keep posted stuff like that!!! God bless you brothee

gouravsingh

you are awesome, your channel helps me so much in coding

mikooo

What's the difference between ".clock .hour" and ".clock .hour .hr" and you call them together for the same properties in CSS?

_gmr_

Nice inspiration bro

I have just one doubt that how ::before selector work in css ?!

arshilhapani

How to update it to the real time? Synchronizing with the Actual time?

TheCure.

Wo Side Mai Jo Google Ka Hai Whi Open Nhi Ho Rha
Wo Step Aap Batao Kessey Kiya, Samajh Hi Nhi Aa Rha

riteshranjansahoo

When will you upload with voice because we are beginners

arifdhali

Glassmorphism Analog Clock using CSS & JavaScript

Glassmorphism Analog Clock using CSS & JavaScript

Glassmorphism Analog Clock Using HTML CSS & JavaScript

Creating a Glassmorphism Analog Clock in HTML, CSS & JS | STEP BY STEP | PROJECT 12 of 80

Working Glassmorphism Analog Clock Using Html, Css and Javascript

Analog Clock With Digital Clock Using Html Css And Javascript

Glassmorphism Analog Clock using CSS & JavaScript

Glassmorphism Analog Clock | HTML, CSS and JS

CSS Analog Clock Design || Amazing Glassmorphism Clock #shorts

Glassmorphism Clock with HTML CSS & JavaScript

Creating Glass Morphism Analog Clock using HTML CSS JAVASCRIPT | How to create analog clock

Glassmorphism Clock | Javascript Working Analog Clock UI Design

CSS Glassmorphism Working Analog Clock | JavaScript Clock

Glassmorphism Analog and digital clock using HTML CSS and JS

Glassmorphism Analog Clock | HTML, CSS and JS

Glassmorphism Analog Clock 🕒 Html css #shorts #project

Glass Morphism and Clock Animations | HTML & CSS and JavaScript

GLASSMORPHISM ANALOG CLOCK WITH TILT ANIMATION | TILT EFFECT | NEW UI TREND | HTML,CSS AND JS

Neumorphism To Glassmorphism | Javascript Working Analog Clock UI Design

Glassmorphism Clock

GLASSMORPHISM analogue CLOCK made with HTML,CSS and JAVASCRIPT

Glassmorphism Analog Clock Using Html CSS JavaScript | Dream Coder

Working Analog Clock using HTML CSS & Javascript - Neumorphsim UI Design

Glassmorphism Effect Digital Clock Using HTML CSS and JavaScript only | How To Create Digital Clock

Glass morphism analog clock | Frosted glass making with html, css &. Js