<div class="straps">
<div class="watch">
<div class="face">
<div class="hands">
<div class="hand hand--hour"></div>
<div class="hand hand--minute"></div>
<div class="hand hand--second"></div>
</div>
</div>
</div>
</div>
:root {
// --detail-color: #F2CCB0;
--detail-color: #aaa;
--size-factor: 4rem;
--rotation: 0deg;
--clock-hand-transition: transform .1s ease-in-out;
}
body {
background-image: url('https://images.unsplash.com/photo-1504333638930-c8787321eee0?auto=format&fit=crop&w=2550&q=80'); //linear-gradient(to bottom, #97BAD8, #90DFE5);
background-position: 50% 50%;
background-size: cover;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr auto 1fr;
grid-template-areas:
'. . .'
'. watch .'
'. . .';
margin: 0;
min-height: 100vh;
padding: 0;
}
.straps {
background-color: #84654F;
border-radius: 0 0 calc(.4 * var(--size-factor)) calc(.4 * var(--size-factor));
box-shadow: 0 1px 5px rgba(0,0,0, .3);
grid-area: watch;
height: calc(7 * var(--size-factor));
position: relative;
width: calc(1 * var(--size-factor));
&::before,
&::after {
left: 50%;
position: absolute;
transform: translateX(-50%);
}
&::before {
border: 6px solid;
border-radius: 3px 3px 0 0;
box-shadow: 0 0 7px rgba(0, 0, 0, .5);
box-sizing: border-box;
content: '|';
color: var(--detail-color);
font-family: Helvetica, Arial, sans-serif;
font-size: calc(.28 * var(--size-factor));
font-weight: 900;
height: calc(.5 * var(--size-factor));
line-height: calc(.5 * var(--size-factor));
text-align: center;
top: calc(-.5 * var(--size-factor));
width: 100%;
}
&::after {
background-image: linear-gradient(to top,
transparent 20%, rgba(0,0,0, .5) 20.1%, rgba(0,0,0, .5) 21.3%, transparent 21.4%,
transparent 30%, rgba(0,0,0, .5) 30.1%, rgba(0,0,0, .5) 31.3%, transparent 31.4%,
transparent 40%, rgba(0,0,0, .5) 40.1%, rgba(0,0,0, .5) 41.3%, transparent 41.4%,
transparent 50%, rgba(0,0,0, .5) 50.1%, rgba(0,0,0, .5) 51.3%, transparent 51.4%);
bottom: 0;
content: '';
height: 50%;
width: 25%;
}
}
.watch {
border: 4px solid var(--detail-color);
border-radius: 50%;
height: calc(2 * var(--size-factor));
left: 50%;
position: absolute;
top: 30%;
transform: translateX(-50%);
width: calc(2 * var(--size-factor));
&::before,
&::after {
background-image: linear-gradient(to right, var(--detail-color) 15%, transparent 16%, transparent 84%, var(--detail-color) 85%);
content: '';
height: calc(.2 * var(--size-factor));
left: 50%;
position: absolute;
transform: translateX(-50%);
width: calc(1.2 * var(--size-factor));
}
&::before {
top: calc(.02 * var(--size-factor));
}
&::after {
bottom: calc(.02 * var(--size-factor));
}
}
.face {
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 1px 5px rgba(0,0,0, .3);
height: 100%;
position: absolute;
width: 100%;
z-index: 1;
}
.hands {
height: 100%;
width: 100%;
}
.hand {
background-color: var(--detail-color);
left: 50%;
position: absolute;
top: 0;
transform: translate(-50%, 5%) rotate(var(--rotation));
transform-origin: 50% 92%;
transition: var(--clock-hand-transition);
width: 1px;
&--hour {
height: 30%;
top: 20%;
width: 2px;
}
&--minute {
height: 38%;
top: 12%;
width: 2px;
}
&--second {
height: 42%;
top: 8%;
width: 1px;
}
}
@media screen and (min-width: 750px) {
:root {
--size-factor: 6rem;
}
}
@media screen and (min-width: 1100px) {
:root {
--size-factor: 7rem;
}
}
@media screen and (min-width: 2000px) {
:root {
--size-factor: 10rem;
}
}
View Compiled
class Timepiece {
constructor() {
this.DEFAULT_TRANSITION = this.getDefaultTransition();
this.hourHand = document.querySelector('.hand--hour');
this.minuteHand = document.querySelector('.hand--minute');
this.secondHand = document.querySelector('.hand--second');
this.hours = 0;
this.minutes = 0;
this.seconds = 0;
this.tick();
window.setInterval(this.tick.bind(this), 1000);
}
tick() {
if (this.seconds % 60 === 0) {
const time = new Date();
this.hours = time.getHours();
this.minutes = time.getMinutes();
this.seconds = 0;
// To counteract the counter-clockwise spin transition.
this.secondHand.style.transition = 'transform 0s linear';
this.secondHand.style.setProperty('--rotation', this.seconds);
this.secondHand.style.transition = this.DEFAULT_TRANSITION;
}
this.seconds++;
if (this.minutes % 60 === 0) {
this.minuteHand.style.transition = 'transform 0s linear';
this.minutes = 0;
this.minuteHand.style.setProperty('--rotation', this.minutes);
this.minuteHand.style.transition = this.DEFAULT_TRANSITION;
}
if (this.hours % 12 === 0) {
this.hourHand.style.transition = 'transform 0s linear';
this.hours = 0;
this.hourHand.style.setProperty('--rotation', this.hours);
this.hourHand.style.transition = this.DEFAULT_TRANSITION;
}
this.setHours(this.hours, this.minutes);
this.setMinutes(this.minutes, this.seconds);
this.setSeconds(this.seconds);
}
setHours(hours, minutes) {
const t = ((hours + (minutes / 60)) / 12);
const degrees = t * 360;
this.hourHand.style.setProperty('--rotation', `${degrees}deg`);
}
setMinutes(minutes, seconds) {
const t = ((minutes + (seconds / 60)) / 60);
const degrees = t * 360;
this.minuteHand.style.setProperty('--rotation', `${degrees}deg`);
}
setSeconds(seconds) {
const degrees = (seconds / 60) * 360;
this.secondHand.style.setProperty('--rotation', `${degrees}deg`);
}
getDefaultTransition() {
const styles = window.getComputedStyle(document.documentElement);
return styles.getPropertyValue('--clock-hand-transition');
}
}
function init() {
const t = new Timepiece();
}
document.addEventListener('DOMContentLoaded', init, false);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.