Created
December 29, 2017 18:42
-
-
Save m1k3yfoo/b29a77868035b4d3d6422286f66a7f86 to your computer and use it in GitHub Desktop.
[CSS Clock] A clock animated by CSS transforms #CSS #JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>JS + CSS Clock</title> | |
</head> | |
<body> | |
<div class="clock"> | |
<div class="clock-face"> | |
<div class="hand hour-hand"></div> | |
<div class="hand min-hand"></div> | |
<div class="hand second-hand"></div> | |
</div> | |
</div> | |
<style> | |
html { | |
background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50); | |
background-size:cover; | |
font-family:'helvetica neue'; | |
text-align: center; | |
font-size: 10px; | |
} | |
body { | |
margin: 0; | |
font-size: 2rem; | |
display:flex; | |
flex:1; | |
min-height: 100vh; | |
align-items: center; | |
} | |
.clock { | |
width: 30rem; | |
height: 30rem; | |
border:20px solid white; | |
border-radius:50%; | |
margin:50px auto; | |
position: relative; | |
padding:2rem; | |
box-shadow: | |
0 0 0 4px rgba(0,0,0,0.1), | |
inset 0 0 0 3px #EFEFEF, | |
inset 0 0 10px black, | |
0 0 10px rgba(0,0,0,0.2); | |
} | |
.clock-face { | |
position: relative; | |
width: 100%; | |
height: 100%; | |
transform: translateY(-3px); /* account for the height of the clock hands */ | |
} | |
.hand { | |
width:50%; | |
height:6px; | |
background:black; | |
position: absolute; | |
top:50%; | |
transform-origin: 100%; /* Default is 50% */ | |
/* Set default position of the hands at midnight */ | |
transform: rotate(90deg); | |
transition: all 0.05s; | |
transition-timing-function: cubic-bezier(0, 2.53, 0.58, 1); | |
} | |
.min-hand { | |
width:50%; | |
height:6px; | |
background:black; | |
} | |
</style> | |
<script> | |
const secHand = document.querySelector('.second-hand'); | |
const minHand = document.querySelector('.min-hand'); | |
const hourHand = document.querySelector('.hour-hand'); | |
function setDate() { | |
const now = new Date(); | |
const seconds = now.getSeconds(); | |
const minutes = now.getMinutes(); | |
const hours = now.getHours(); | |
// We're adding 90 to offset the default 90 degrees set in CSS transform | |
const secondsDegrees = ((seconds / 60) * 360) + 90; | |
const minutesDegrees = ((minutes / 60) * 360) + 90; | |
const hoursDegrees = ((hours / 60) * 360) + 90; | |
secHand.style.transform = `rotate(${secondsDegrees}deg)`; | |
minHand.style.transform = `rotate(${minutesDegrees}deg)`; | |
hourHand.style.transform = `rotate(${hoursDegrees}deg)`; | |
console.log("seconds: " + seconds); | |
} | |
// Set the function to run every second (1,000 ms) | |
setInterval(setDate, 1000); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment