Skip to content

Commit cf4066e

Browse files
itzanwayitzanway
committed
animation clock added
1 parent f5f8747 commit cf4066e

File tree

3 files changed

+233
-0
lines changed

3 files changed

+233
-0
lines changed

‎Clock/Itzanway/clock.css

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
body{
2+
background-color: rgb(255, 255, 255);
3+
padding: 0;
4+
margin: 0;
5+
}
6+
7+
.clock{
8+
width: 300px;
9+
height: 300px;
10+
border-radius: 50%;
11+
background-color: rgb(252, 230, 209);
12+
margin: 100px auto 0px auto;
13+
position: relative;
14+
border:20px solid rgb(254, 133, 19);
15+
16+
}
17+
.center{
18+
background-color: #000;
19+
position: absolute;
20+
left: calc(50% - 10px);
21+
top: calc(50% - 10px);
22+
width: 20px;
23+
height: 20px;
24+
border-radius: 50%;
25+
z-index: 20;
26+
}
27+
.hourHand{
28+
width: 10px;
29+
height: 75px;
30+
background-color: #000;
31+
transform-origin: bottom center;
32+
border-radius: 4px;
33+
position: absolute;
34+
top: 75px;
35+
left: 145px;
36+
z-index: 10;
37+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
38+
transform: rotate(360deg);
39+
40+
}
41+
.minuteHand{
42+
width: 5px;
43+
height: 120px;
44+
background-color: #000;
45+
transform-origin: bottom center;
46+
border-radius: 4px;
47+
position: absolute;
48+
top: 30px;
49+
left: 147px;
50+
z-index: 9;
51+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
52+
transform: rotate(90deg);
53+
54+
}
55+
.secondHand{
56+
width: 2px;
57+
height: 120px;
58+
background-color:red;
59+
transform-origin: bottom center;
60+
border-radius: 4px;
61+
position: absolute;
62+
top: 30px;
63+
left: 149px;
64+
transition: all 0.06s;
65+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
66+
z-index: 8;
67+
transform: rotate(360deg);
68+
69+
}
70+
.time{
71+
position: absolute;
72+
top: 45%;
73+
left: 10%;
74+
border: 1px solid #fff8dc;
75+
background-color: #fff;
76+
padding: 5px;
77+
display: block;
78+
box-shadow: inset 0px 2px 5px rgba(0,0,0,.4);
79+
border-radius: 5px;
80+
min-width: 70px;
81+
height: 15px;
82+
83+
}
84+
.time small{
85+
color:red;
86+
transition: all 0.05s;
87+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
88+
}
89+
90+
.clock ul{
91+
list-style: none;
92+
padding: 0;
93+
94+
}
95+
.clock ul li{
96+
position: absolute;
97+
width:20px;
98+
height:20px;
99+
text-align: center;
100+
line-height: 20px;
101+
font-size: 10px;
102+
color:red;
103+
}
104+
.clock ul li:nth-child(1){
105+
right: 22%;
106+
top:6.5%;
107+
}
108+
.clock ul li:nth-child(2){
109+
right: 6%;
110+
top:25%;
111+
}
112+
.clock ul li:nth-child(3){
113+
right: 1%;
114+
top:calc(50% - 10px);
115+
color:#000;
116+
font-size: 20px;
117+
font-weight: bold;
118+
}
119+
.clock ul li:nth-child(4){
120+
right: 6%;
121+
top:69%;
122+
}
123+
.clock ul li:nth-child(5){
124+
right: 22%;
125+
top:84%;
126+
}
127+
.clock ul li:nth-child(6){
128+
right: calc(50% - 10px);
129+
top:calc(99% - 20px);
130+
color:#000;
131+
font-size: 20px;
132+
font-weight: bold;
133+
}
134+
.clock ul li:nth-child(7){
135+
left: 22%;
136+
top:84%;
137+
}
138+
.clock ul li:nth-child(8){
139+
left: 6%;
140+
top:69%;
141+
}
142+
.clock ul li:nth-child(9){
143+
left: 1%;
144+
top:calc(50% - 10px);
145+
color:#000;
146+
font-size: 20px;
147+
font-weight: bold;
148+
}
149+
.clock ul li:nth-child(10){
150+
left: 6%;
151+
top:25%;
152+
}
153+
.clock ul li:nth-child(11){
154+
left: 22%;
155+
top:6.5%;
156+
}
157+
.clock ul li:nth-child(12){
158+
right: calc(50% - 10px);
159+
top:1%;
160+
color:#000;
161+
font-size: 20px;
162+
font-weight: bold;
163+
}
164+
165+
166+

‎Clock/Itzanway/clock.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="clock.css">
7+
<title>Animated Clock</title>
8+
</head>
9+
<body>
10+
<div class="clock">
11+
<div class="hourHand"></div>
12+
<div class="minuteHand"></div>
13+
<div class="secondHand"></div>
14+
<div class="center"></div>
15+
<ul>
16+
<li><span>1</span></li>
17+
<li><span>2</span></li>
18+
<li><span>3</span></li>
19+
<li><span>4</span></li>
20+
<li><span>5</span></li>
21+
<li><span>6</span></li>
22+
<li><span>7</span></li>
23+
<li><span>8</span></li>
24+
<li><span>9</span></li>
25+
<li><span>10</span></li>
26+
<li><span>11</span></li>
27+
<li><span>12</span></li>
28+
</ul>
29+
</div>
30+
31+
<script src="CSS Animations\clock.js"></script>
32+
33+
</body>
34+
</html>

‎Clock/Itzanway/clock.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
window.onload = function() {
2+
3+
const hourHand = document.querySelector('.hourHand');
4+
const minuteHand = document.querySelector('.minuteHand');
5+
const secondHand = document.querySelector('.secondHand');
6+
const time = document.querySelector('.time');
7+
const clock = document.querySelector('.clock');
8+
const audio = document.querySelector('.audio');
9+
10+
function setDate(){
11+
const today = new Date();
12+
13+
const second = today.getSeconds();
14+
const secondDeg = ((second / 60) * 360) + 360;
15+
secondHand.style.transform = `rotate(${secondDeg}deg)`;
16+
17+
audio.play();
18+
19+
const minute = today.getMinutes();
20+
const minuteDeg = ((minute / 60) * 360);
21+
minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
22+
23+
const hour = today.getHours();
24+
const hourDeg = ((hour / 12 ) * 360 );
25+
hourHand.style.transform = `rotate(${hourDeg}deg)`;
26+
27+
time.innerHTML = '<span>' + '<strong>' + hour + '</strong>' + ' : ' + minute + ' : ' + '<small>' + second +'</small>'+ '</span>';
28+
29+
}
30+
31+
setInterval(setDate, 1000);
32+
33+
}

0 commit comments

Comments
 (0)