Here I created clock using CSS and HTML.
CSS:
body{
background-color: aquamarine;
}
.clock{
height: 150px;
width: 150px;
border-radius: 150px;
left: 38%;
top: 24%;
position: absolute;
}
.hand{
position: absolute;
height: 30vmin;
left: 49%;
top: 15%;
transform-origin: 50% 80%;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.4);
animation-name: moving;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.hour{
width: 6px;
background: whitesmoke;
animation-duration: 43200s;
}
.second{
width: 4px;
background: rgb(189, 144, 144);
animation-duration: 3600s;
}
.minute{
background-color: hsl(0, 72%, 47%);
width: 2px;
animation-duration: 60s;
}
.hour12,
.hour1,
.hour2,
.hour3,
.hour4,
.hour5 {
height: 10px;
width: 375px;
background: transparent;
border-left: 70px solid #000;
border-right: 70px solid #000;
transform: translate(-50%, -50%);
top: 75%;
left: 50%;
position: absolute;
}
.hour12{
left:110px;
}
.hour3 {
transform: rotate(90deg) translate(0, 34vmin);
}
.hour1 {
transform: rotate(120deg) translate(17vmin, 30vmin);
}
.hour2 {
transform: rotate(150deg) translate(29vmin, 18vmin);
}
.hour4 {
transform: rotate(210deg) translate(30vmin, -17vmin);
}
.hour5 {
transform: rotate(240deg) translate(17vmin, -30vmin);
}
@keyframes moving {
to {
transform: rotate(360deg);
}
}
HTML:
<div class="clock">
<div class="hour12"></div>
<div class="hour1"></div>
<div class="hour2"></div>
<div class="hour3"></div>
<div class="hour4"></div>
<div class="hour5"></div>
</div>
<div class="hand hour"></div>
<div class="hand second"></div>
<div class="hand minute"></div>
CLOCK:
The clock is running one, but I couldn't save them as supporting format. If u want to see the running clock, copy the code and try it in your machine.
