CODEWITHSUNDEEP
javascripthtmlcss
dior44
dior44

Reputation: 11

how to make clock hands move/rotate (html, css)

i tried making an easy working clock but i have no idea how to get the clock hands to rotate. i tried to use "@keyframes" to try to get it working but i dont know what to put in "before". is there a way to make it rotate using only css or will using javascript be easier. the link below shows my work but you can also look below and see my code.

https://codepen.io/dior44/pen/GRZMZdy

   
h1 {
  margin: -40px 0 0 0;
  font-size: 50px;
  position: relative;
  top: 100px;
}
div {
  margin: 0 auto;
}
.clock {
  height: 400px;
  width: 400px;
  border-radius: 400px;
  background: #cccc;
}
.dot {
  height: 60px;
  width: 60px;
  border-radius: 60px;
  background: #aaa;
  position: relative;
  top: 120px;
  left: -27px;
  z-index: -1;
}
.hours {
  width: 7px;
  height: 90px;
  background: blue;
  position: relative;
  top: 100px;
  
}
.minutes {
  width: 5px;
  height: 170px;
  background: black;
  position: relative;
  top: -50px;
  
}
.seconds {
  width: 3px;
  height: 220px;
  background: red;
  position: relative;
  top: -10px;
  animation-name: second;
  animation-duration: 1s;
}

@keyframes second {
  from {
    
  }
}

h2 {
  position: relative;
  top: 45px;
  left: 738px;
  font-size: 35px;
  margin: -20px 0 0 0;
}
h3 {
  margin: -140px 0 0 0;
  font-size: 35px;
  position:relative;
  top: 310px;
  left: 920px;
}
h4 {
  margin: 3px 0 0 0;
  position: relative;
  top: 268px;
  left: 570px;
  font-size: 35px; 
}
h5 {
  margin: 20px 0 0 0;
  position: relative;
  top: 400px;
  left: 738px;
  font-size: 35px;
}
<h1>Clock</h1>
<h2>12</h2>
<h3>3</h3>
<h4>9</h4>
<h5>6</h5>
<body>
  <div class="clock">
  <div class="hours">
  <div class="minutes">
  <div class="seconds">
  <div class="dot">
  <div class="12">
  <div class="3">
  <div class="6">
  <div class="9">
</body>

Upvotes: 1

Views: 3379

Answers (1)

KellyCode
KellyCode

Reputation: 797

Pure HTML/CSS second hand: 

#clock_container {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid black;
}

#seconds {
  height: 50%;
  width: 0px;
  box-sizing: border-box;
  border: 1px solid black;
  top: 0%;
  left: 50%;
  position: absolute;
  transform-origin: bottom;
  /* of-course, would be 60s */
  animation: secondsMotion 10s infinite linear;
}

@keyframes secondsMotion {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
<div id="clock_container">
  <div id="seconds"></div>
</div>

If you wanted to start with the correct time - with a little JS early on:

var sec = new Date().getSeconds();
var sec_start = (sec/60) * 360 + 'deg';
var sec_end = (sec/60) * 360 + 360 + 'deg';
document.documentElement.style.setProperty("--sec-rot-start", sec_start);
document.documentElement.style.setProperty("--sec-rot-end", sec_end);

and then, in the keyframes:

@keyframes secondsMotion {
  0% {
    transform: rotate(var(--sec-rot-start));
  }

  100% {
    transform: rotate(var(--sec-rot-end));
  }
}

Upvotes: 4

Related Questions