Analog Clock with HTML, CSS, Javascript
Projects

Analog Clock With CSS Animations

Using CSS & animation create a clock and design it

HTML Code

<div class="wrapper">
	<div class="clock">
		<div class="arms"></div>
      <div class="quarter">
    <span class="twelve">12</span>
    <span class="three">3</span>
    <span class="six">6</span>
    <span class="nine">9</span>
  </div>
	</div>

		<div class="bells">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	<div class="legs">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</div>

CSS Code

@import url('https://fonts.googleapis.com/css?family=Noto+Sans&amp;display=swap');
body, html {
    height: 100%;
    width: 100%;
    background: #F7EDF0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper {
    position: relative;
    background: #F7EDF0;
}
/* clock */
.clock {
    position: relative;
    height: 250px;
    width: 250px;
    background: #fff;
    border: 8px solid #E5A4A0;
    border-radius: 50%;
    z-index: 3;
}
/* quarters */ 
.quarter {
  width: 100%;
  height: 100%;
  position: relative;
}
.quarter span {
  font: 25px 'Noto Sans', sans-serif;
  color: #555;
  position: absolute;
  }
.twelve {
  left: 40%;
}
.three {
  right: 7px;
  top: 45%;
}
.six {
  left: 45%;
  bottom: 5px;
}
.nine {
  top: 45%;
  left: 7px;
}
/* bells */
.bells .left, .bells .right {
    position: absolute;
    top: 0%;
    height: 30%;
    width: 30%;
    background: #E5A4A0;
    border-radius: 50%;
    z-index: 2;
}
.bells .left {
    left: -3%;
}
.bells .right {
    right: -3%;
}
/* legs */
.legs .left, .legs .right {
    position: absolute;
    bottom: -10%;
    height: 30%;
    width: 5%;
    background: #E5A4A0;
    border-radius: 10px;
}
.legs .left {
    left: 15%;
    transform: rotate(25deg);
}
.legs .right {
    right: 15%;
    transform: rotate(-25deg);
}
/* arms */
.clock .arms {
    width: 10%;
    height: 10%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #F4AFAB;
    border-radius: 50%;
}
/* long and short */
.clock .arms::before, .clock .arms::after {
    position: absolute;
    bottom: 10px;
    left: 32%;
    display: block;
    content: "";
    border-radius: 5px;
    background: #F4AFAB;
    transform-origin: 50% 100%;
    width: 7px;
}
/* long */
.clock .arms::before {
    height: 70px;
    animation: rotate 30s infinite linear;
}
/* short */
.clock .arms::after {
    height: 40px;
    animation: rotate 180s infinite linear;
}
@keyframes rotate {
  to {transform: rotate(360deg);}
}