.container
.top-strap
.sheen
.bottom-strap
.sheen
.watchface
.twist
.internal-face
.center
.sec
.min
.hour
View Compiled
/* Absolute Center */
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* Horizontal Absolute Center */
@mixin h-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* Strap Pattern */
@mixin striped-bg($bg-color: #373737, $darken-amount: 5%, $stripe-color: darken($bg-color, $darken-amount)) {
background-color: $bg-color;
background-image: linear-gradient(-45deg, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent);
background-size: 5px 5px;
}
/* Strap Bars */
%strap-bars {
content: '';
display: block;
width: 10px;
height: 30px;
background: #fff;
position: absolute;
box-shadow:0px 2px 1px 0px rgba(0,0,0,0.2);
}
/* Strap Shine */
%sheen {
content: '';
width: 100%;
background: #fff;
opacity: 0.2;
position: absolute;
}
body{ background: #7ceeff; }
.container {
width: 400px;
height: 300px;
position: relative;
margin: 20px auto;
}
.top-strap {
height: 64px;
width: 60px;
background: grey;
border: 4px solid black;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
@include h-center;
top: -2px;
@include striped-bg;
box-shadow:0px 2px 0 0px rgba(0,0,0,0.3);
&:after {
@extend %strap-bars;
bottom: -24px;
left: -15px;
}
&:before {
@extend %strap-bars;
right: -15px;
bottom: -24px;
}
.sheen {
&:before {
@extend %sheen;
height: 6px;
bottom: 5px;
}
&:after {
@extend %sheen;
height: 2px;
bottom: 0px;
}
}
}
.bottom-strap {
height: 64px;
width: 60px;
border: 4px solid black;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
@include h-center;
bottom: -2px;
@include striped-bg;
&:after {
@extend %strap-bars;
top: -24px;
left: -15px;
}
&:before {
@extend %strap-bars;
right: -15px;
top: -24px;
}
.sheen {
&:before {
@extend %sheen;
height: 6px;
top: 5px;
}
&:after {
@extend %sheen;
height: 2px;
top: 0px;
}
}
}
.watchface {
width: 150px;
height: 150px;
background: #e4e4e4;
border-radius: 100px;
border: 2px solid #4e4e4e;
position: relative;
@include center;
box-shadow: 0px 4px 0 2px rgba(0,0,0,0.2);
.twist {
content: '';
height: 17px;
width: 10px;
background: #4e4e4e;
position: absolute;
right:-10px;
top: 50%;
transform: translateY(-50%);
box-shadow:0px 2px 0 0px rgba(0,0,0,0.3);
&:before {
content: '';
position: absolute;
height: 3px;
bottom: 2px;
width: 100%;
background: #fff;
opacity: 0.4;
}
&:after {
content: '';
position: absolute;
height: 6px;
top: 2px;
width: 100%;
background: #fff;
opacity: 0.4;
}
}
.internal-face {
height: 135px;
width: 135px;
background: #e4e4e4;
border-radius: 100px;
border: 1px solid #a3a3a3;
box-shadow:
0 0 0 1px white;
@include center;
&:before {
content: '';
display: block;
width: 115px;
height: 115px;
background: #fff;
border-radius: 100px;
@include center;
}
}
.center {
background: #363636;
height: 14px;
width: 14px;
@include center;
border-radius: 14px;
z-index: 20;
&:after {
content: '';
@include center;
height: 4px;
width: 4px;
background: #000;
border-radius: 4px;
}
}
.sec {
height: 50px;
width: 1px;
background: #363636;
position: absolute;
bottom: 50%;
left: 68px;
transform-origin: bottom center;
transform: rotate(0deg);
animation: spin 5s linear infinite;
}
.min {
height: 50px;
width: 3px;
background: #363636;
position: absolute;
bottom: 50%;
left: 67px;
transform-origin: bottom center;
transform: rotate(0deg);
animation: spin 15s linear infinite;
}
.hour {
height: 40px;
width: 10px;
background: #363636;
position: absolute;
bottom: 50%;
left: 63px;
transform-origin: bottom center;
transform: rotate(0deg);
animation: spin 60s linear infinite;
}
}
@keyframes spin {
100% {transform: rotate(360deg); }
}
View Compiled
This Pen doesn't use any external CSS resources.