<div class="d-flex flex-column flex-1 align-items-center justify-content-center">
<div class="watch-container d-flex align-items-center justify-content-center">
<div class="watch">
<div class="pointers h-100 w-100 d-flex align-items-center justify-content-center">
<div class="pointer-container seconds">
<div class="dot d-flex justify-content-center">
<div class="pointer seconds"></div>
</div>
</div>
<div class="pointer-container minutes">
<div class="dot d-flex justify-content-center">
<div class="pointer minutes"></div>
</div>
</div>
<div class="pointer-container hours">
<div class="dot d-flex justify-content-center">
<div class="pointer hours"></div>
</div>
</div>
</div>
<div class="numbers h-100 d-flex flex-column justify-content-between">
<div class="top d-flex justify-content-center"></div>
<div class="middle d-flex justify-content-between"></div>
<div class="bottom d-flex justify-content-center"></div>
</div>
</div>
<div class="belt"></div>
</div>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*
-- Values
*/
$belt-width: 140px;
$belt-height: 385px;
$watch-size: 280px;
$watch-border-size: 6px;
$watch-padding: 6px;
$label-size: 32px;
$dot-size: 8px;
$seconds-height: 90px;
$seconds-width: 2px;
$hours-height: 50px;
$hours-width: 3px;
$minutes-height: 85px;
$minutes-width: 3px;
/*
-- Colors
*/
$body-background-color: #eeeeee;
$text-color: #fff;
$belt: #212121;
$watch-color: #333333;
$watch-border-color: #000;
$red-label: #d32f2f;
$dot-color: #fff;
$seconds-color: #b71c1c;
$hours-color: #fff;
$minutes-color: #757575;
html {
height: 100%;
}
body {
color: #fff;
height: 100%;
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 18px;
letter-spacing: 0.5px;
background-color: $body-background-color;
display: flex;
flex-direction: column;
}
/*
-- Flex
*/
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.align-items-center {
align-items: center;
}
.justify-content-center {
justify-content: center;
}
.justify-content-between {
justify-content: space-between;
}
.flex-1 {
flex-grow: 1;
}
.h-100 {
height: 100%;
}
.w-100 {
width: 100%;
}
/*
-- Smart Watch
*/
.watch-container {
position: relative;
width: $watch-size;
&::after {
content: "";
position: absolute;
height: $watch-size;
width: $watch-size;
background-color: $watch-color;
-webkit-box-shadow: 0 0 60px 40px rgba(80, 80, 80, 0.1);
-moz-box-shadow: 0 0 60px 40px rgba(80, 80, 80, 0.1);
box-shadow: 0 0 60px 40px rgba(80, 80, 80, 0.1);
border-radius: 50%;
z-index: -1;
}
.watch {
height: $watch-size;
width: $watch-size;
border: $watch-border-size solid $watch-border-color;
background-color: $watch-color;
padding: $watch-padding;
border-radius: 50%;
position: absolute;
.pointers {
position: absolute;
left: 0;
top: 0;
//Pointer Globals
.pointer-container.seconds,
.pointer-container.minutes,
.pointer-container.hours {
.dot {
height: $dot-size;
width: $dot-size;
border-radius: 50%;
background-color: $dot-color;
position: relative;
}
}
//Pointer
@mixin pointer($height, $width, $border-radius, $color) {
height: $height;
width: $width;
border-radius: $border-radius;
background-color: $color;
position: absolute;
bottom: 12px;
}
//Animation
@mixin animation($animation-name, $time, $pointer-initial-position) {
-webkit-animation: $animation-name $time infinite linear;
-o-animation: $animation-name $time infinite linear;
animation: $animation-name $time infinite linear;
@keyframes #{$animation-name} {
to {
transform: rotateZ($pointer-initial-position + 360deg);
}
}
}
//Seconds Pointer
.pointer-container.seconds {
z-index: 2;
transform: rotateZ(0deg);
//Name, 1 minute, Pointer Position
@include animation(animate-seconds, 60s, 0deg);
.dot {
.pointer.seconds {
//Height, Width, Border-radius, Color
@include pointer(
$seconds-height,
$seconds-width,
1px,
$seconds-color
);
}
}
}
//Minutes Pointer
.pointer-container.minutes {
z-index: 1;
position: absolute;
transform: rotateZ(0deg);
//Name, 1 hour, Pointer Position
@include animation(animate-minutes, 3600s, 0deg);
.dot {
.pointer.minutes {
@include pointer(
$minutes-height,
$minutes-width,
1.5px,
$minutes-color
);
}
}
}
//Hours Pointer
.pointer-container.hours {
z-index: 0;
position: absolute;
transform: rotateZ(310deg);
//Name, 12 hours, Pointer Position
@include animation(animate-hours, 43200s, 310deg);
.dot {
.pointer.hours {
@include pointer($hours-height, $hours-width, 1.5px, $hours-color);
}
}
}
}
.numbers {
.top::before,
.middle::before,
.middle::after,
.bottom::before {
display: flex;
align-items: center;
justify-content: center;
height: $label-size;
width: $label-size;
border-radius: 50%;
}
.top {
text-align: center;
&::before {
content: "12";
background-color: $red-label;
}
}
.middle {
&::before {
content: "9";
}
&::after {
content: "3";
}
}
.bottom {
&::before {
content: "6";
}
}
}
}
.belt {
width: $belt-width;
height: $belt-height;
border-radius: 10px;
background-color: $belt;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.