how to make a css clock

Solutions on MaxInterview for how to make a css clock by the best coders in the world

showing results for - "how to make a css clock"

24 Apr 2018

1*
2{
3	margin: 0;
4	padding: 0;
5	box-sizing: border-box;
6}
7
8body
9{
10	display: flex;
11	justify-content: center;
12	align-items: center;
13	min-height: 100vh;
14	background: #091921;
15}
16
17.clock 
18{
19	width: 350px;
20	height: 350px;
21	display: flex;
22	justify-content: center;
23	align-items: center;
24	background: url(clock.png);
25	border-radius: 50%;
26	background-size: cover;
27	border: 4px solid #091921;
28	box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
29					inset 0 -15px 15px rgba(255, 255, 255, 0.05),
30					0 15px 15px rgba(0, 0, 0, 0.03),
31					inset 0 15px 15px rgba(0, 0, 0, 0.03);
32}
33
34.clock:before
35{
36	content: '';
37	position: absolute;
38	width: 15px;
39	height: 15px;	
40	background: #fff;
41	border-radius: 50%;
42	z-index: 10000;	
43}
44
45.clock .hour,
46.clock .min,
47.clock .sec
48{
49	position: absolute;
50}
51
52.clock .hour, .hr
53{
54	width: 160px;
55	height: 160px;
56}
57
58
59.clock .min, .mn
60{
61	width: 190px;
62	height: 190px;
63}
64
65.clock .sec, .sc
66{
67	width: 230px;
68	height: 230px;
69}
70
71.hr, .mn, .sc
72{
73	display: flex;
74	justify-content: center;
75	/*align-items: center;*/
76	position: absolute;
77	border-radius: 50%;	
78}
79
80.hr:before
81{
82	content: '';
83	position: absolute;	
84	width: 8px;
85	height: 80px;
86	background: #ff105e;
87	z-index: 10;
88	border-radius: 6px 6px 0 0; 
89}
90
91
92
93.mn:before
94{
95	content: '';
96	position: absolute;	
97	width: 4px;
98	height: 90px;
99	background: #fff;
100	z-index: 11;
101	border-radius: 6px 6px 0 0; 
102}
103
104
105
106.sc:before
107{
108	content: '';
109	position: absolute;	
110	width: 2px;
111	height: 150px;
112	background: #fff;
113	z-index: 12;
114	border-radius: 6px 6px 0 0; 
115}

Maite

12 Sep 2020

1<html>
2<head>
3	<meta charset="UTF-8">
4	<title>Clock</title>
5	<script language="Javascript" type="text/Javascript" src="libraries/p5.js"></script>
6	<link rel="stylesheet" type="text/css" href="style.css">	
7		<style> body {padding: 0; margin: 0;} </style>
8</head>
9<body>
10	<div class="clock">
11		<div class="hour">
12			<div class="hr" id="hr"></div>
13		</div>
14		<div class="min">
15			<div class="mn" id="mn"></div>
16		</div>
17		<div class="sec">
18			<div class="sc" id="sc"></div>
19		</div>
20	</div>
21	<script type="text/javascript">
22      // first for css you need to go to online tutorials channel and download the image and put it in your folder
23		const deg = 6;
24		const hr = document.querySelector('#hr');
25
26		const mn = document.querySelector('#mn');
27
28		const sc = document.querySelector('#sc');
29
30
31		setInterval(() => {
32
33
34
35		let day = new Date();
36		let hh = day.getHours() * 30;
37		let mm = day.getMinutes() * deg;
38		let ss = day.getSeconds() * deg;
39
40
41
42		hr.style.transform = hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
43
44
45
46
47		mn.style.transform = `rotateZ(${mm}deg)`;
48
49
50
51
52		sc.style.transform = `rotateZ(${ss}deg)`;
53		})	
54
55
56
57
58
59		let day = new Date();
60		let hh = day.getHours() * 30;
61		let mm = day.getMinutes() * deg;
62		let ss = day.getSeconds() * deg;
63
64		hr.style.transform = hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
65
66
67		mn.style.transform = `rotateZ(${mm}deg)`;
68
69
70		sc.style.transform = `rotateZ(${ss}deg)`;
71
72	</script>
73</body>
74</html>

Roman

13 Nov 2016

1// and now you have a clock
2

similar questions

css loading css loading spinner css loader css pause animation css loading spinner with text css loading button css counters

queries leading to this page

css clock timer clock css html clock source code html css clock css format css animation clock rotate clock hand transform origin how to make a clock in html and css css round clock how to make clock css make a clock css how to make a clock using html and css how to animate a clock face css animation clock timer css clock html and css digital clock html css make a running clock in css how to make a clock css clock in html and css css for clock html css clock how to make a css clock timer clock css clock with css how to make a clock in css block css page clock css clock clock background change css css clock animation a clock in css3 css make a clock clock css make clock design with html css clock animation css clock running css digital clock in css css make clock how to design a clock in css wiggly clock line css css display clock mking clock with css clock html css css for clock or css clock in css digital clock using css css on clock css clock hand css clock position thow to make a clock with css rotating clock animation css clock in html css how to make a css clock