Should work in modern browsers. Done in 18 minutes.
A Pen by Viktor Bezdek on CodePen.
<div class="clock"> | |
<div class="clock--arrow clock__hours"></div> | |
<div class="clock--arrow clock__minutes"></div> | |
<div class="clock--arrow clock__seconds"></div> | |
</div> |
Should work in modern browsers. Done in 18 minutes.
A Pen by Viktor Bezdek on CodePen.
(function(){ | |
var ticker = function() { | |
var now = new Date(), | |
seconds = now.getSeconds(), | |
minutes = now.getMinutes(), | |
hours = now.getHours(); | |
hours = ((hours > 11 ? hours - 12 : hours) / 12) * 60; | |
document.querySelector(".clock__hours").dataset.value = hours; | |
document.querySelector(".clock__seconds").dataset.value = seconds; | |
document.querySelector(".clock__minutes").dataset.value = minutes; | |
} | |
setInterval(ticker, 100); | |
})(); |
.clock { | |
position: relative; | |
left: 50%; | |
margin-left: -200px; | |
margin-top: 50px; | |
width: 400px; | |
height: 400px; | |
background: #45484d; | |
background: radial-gradient(ellipse at center, #45484d 0%,#000000 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); | |
border-radius: 50%; | |
&:after { | |
content: ''; | |
position: absolute; | |
width: 20px; | |
height: 20px; | |
background-color: #fff; | |
margin-top: 188px; | |
margin-left: 190px; | |
border-radius: 50%; | |
border: 2px solid #000; | |
} | |
.clock--arrow { | |
width: 1px; | |
height: 1px; | |
position: relative; | |
top: 200px; | |
left: 200px; | |
opacity: 0; | |
transition: opacity 0.5s ease; | |
} | |
.clock--arrow[data-value] { | |
opacity: 1; | |
} | |
.clock--arrow[data-value="0"] { | |
transition: none; | |
} | |
.clock__seconds:before { | |
position: absolute; | |
content: ''; | |
margin-top: -180px; | |
height: 180px; | |
width: 2px; | |
background-color: #ff0000; | |
box-shadow: rgba(0,0,0,0.5) 0px 0px 2px; | |
} | |
.clock__minutes:before { | |
position: absolute; | |
content: ''; | |
margin-top: -180px; | |
height: 180px; | |
width: 2px; | |
background-color: #fff; | |
box-shadow: rgba(0,0,0,0.5) 0px 0px 2px; | |
} | |
.clock__hours:before { | |
position: absolute; | |
content: ''; | |
margin-top: -100px; | |
height: 100px; | |
width: 4px; | |
background-color: #fff; | |
box-shadow: rgba(0,0,0,0.5) 0px 0px 2px; | |
} | |
.clock--arrow_state(@index) when (@index >= 0) { | |
@rotation: unit(360/60*@index, deg); | |
.clock--arrow[data-value="@{index}"] { | |
transform: rotate(@rotation); | |
} | |
.clock--arrow_state(@index - 1); | |
} | |
.clock--arrow_state(60); | |
} |