<div class="watch">
<div class="band">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="goldring">
<div class="time">
<div class="points"></div>
<div class="points"></div>
<div class="points"></div>
<div class="points"></div>
<div class="points"></div>
<div class="points"></div>
<div class="points"></div>
<div class="points"></div>
<div class="points"></div>
<div class="points"></div>
<div class="points"></div>
<div class="points"></div>
</div>
<div class="inner">
<div class="handle"></div>
<div class="handle_short"></div>
<div class="handle_thin"></div>
<div class="center">
</div>
</div>
<div class="knob"></div>
</div>
</div>
$t: transparent;
$bk: #fff;
@mixin for-phone-only {
@media (max-width: 599px) {
@content;
}
}
@mixin for-tablet-portrait-up {
@media (min-width: 600px) {
@content;
}
}
@mixin for-tablet-landscape-up {
@media (min-width: 900px) {
@content;
}
}
@mixin for-desktop-up {
@media (min-width: 1200px) {
@content;
}
}
@mixin for-big-desktop-up {
@media (min-width: 1800px) {
@content;
}
}
@mixin on-circle($item-count, $circle-size, $item-size) {
position: relative;
width: $circle-size;
height: $circle-size;
border-radius: 50%;
padding: 0;
list-style: none;
> * {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -($item-size / 2);
width: $item-size;
height: $item-size;
$angle: (360 / $item-count);
$rot: 0;
@for $i from 1 through $item-count {
&:nth-of-type(#{$i}) {
transform: rotate($rot * 1deg) translate($circle-size / 2) rotate($rot * -1deg);
}
$rot: $rot + $angle;
}
}
}
body{
font-size: 10px;
// background-image: url("https://assets.codepen.io/2970881/GOLD-BLACK-SUNRAY-MENS-ACCESSORIES-ADIDAS-WATCHES-Z08-1604-00GDBKS_1.jpg");
background-size: 500px;
background-position: 51% -6%;
// background-repeat: no-repeat;
@include for-phone-only {
font-size: 6px;
background: #fff;
}
.watch{
width: 40em;
height: 69em;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
.band{
.top{
width: 26em;
height: 5.93em;
position: absolute;
background:
$t
;
top: 27%;
left: 18%;
background-repeat: no-repeat;
&:after{
content: '';
position: absolute;
top: -10em;
left: 50%;
transform: translate(-50%,0);
width: 18em;
height: 15em;
background:
linear-gradient(
to bottom,
rgba(#fff,.1) 48%,
$t 54%,
)
50% 17.3% / 16.6em 15em,
linear-gradient(
92deg,
$bk 48%,
$t 54%,
)
0% 0% / 1.7em 6.8em,
linear-gradient(
-92deg,
$bk 48%,
$t 54%,
)
100% 0% / 1.7em 6.8em,
linear-gradient(
#333 48%,
#333 54%,
)
50% 17.3% / 16.6em 15em,
;
background-repeat: no-repeat;
}
&:before{
width: 26em;
height: 5.93em;
content:'';
background:
linear-gradient(
-97deg,
$bk 50%,
rgba(#333,.4) 52%,
$t 53%,
)
100% 17.3% / 4.6em 100%,
linear-gradient(
97deg,
$bk 50%,
rgba(#333,.4) 52%,
$t 53%,
)
0% 17.3% / 4.6em 100%,
linear-gradient(
to right,
rgba( #fff,.2),
#EFD5B2,
rgba( #fff,.2),
)
0% 17.3% / 100% 100%,
linear-gradient(
to bottom,
#D2B394,
#C7A582,
)
0% 17.3% / 100% 100%,
rgba(#EDD3B0,1);
position: absolute;
top:-3em;
background-repeat: no-repeat;
}
}
.bottom{
width: 26em;
height: 8.3em;
position: absolute;
background:
red;
;
top: 54%;
left: 18%;
background-repeat: no-repeat; &:after{
content: '';
position: absolute;
top: 10em;
left: 50%;
transform: translate(-50%,0);
width: 18em;
height: 25em;
background:
linear-gradient(
-94deg,
$t 48%,
$bk 54%,
)
0% 100% / 1.7em 18em,
linear-gradient(
94deg,
$t 48%,
$bk 54%,
)
100% 100% / 1.7em 18em,
linear-gradient(
to bottom,
rgba(#000,.2) 9%,
rgba(#fff,.05) 12%,
$t,$t
) 50% 100% /100% 85%,
linear-gradient(
to bottom,
rgba(#000,.05) 9%,
rgba(#808080,.1) 13%,
rgba(#808080,.1) 60%,
#000 ,
) 50% 100% /100% 85%,
linear-gradient(
#333 48%,
#333 54%,
) 50% 100% /100% 85%,
// back part
linear-gradient(
to right,
rgba(#333,.2),
$t,$t,$t,
rgba(#333,.2) ,
)
50% 12% /14em 5em,
linear-gradient(
to right,
rgba(#8A6D5C,1),
#8A6D5C ,
)
50% 12% /14em 5em,
linear-gradient(
to bottom,
rgba(#fff,1) 50%,
$t 51%,
)
50% 12% / 16.6em 10em,
;
background-repeat: no-repeat;
}
&:before{
width: 26em;
height: 9.5em;
position: absolute;
top:8em;
content:'';
background:
linear-gradient(
97deg,
$t 50%,
rgba(#333,.4) 52%,
$bk 53%,
)
100% 17.3% / 4.6em 100%,
linear-gradient(
-97deg,
$t 50%,
rgba(#333,.4) 52%,
$bk 53%,
)
0% 17.3% / 4.6em 100%,
linear-gradient(
to right,
rgba( #fff,.2),
#EFD5B2,
rgba( #fff,.2),
)
0% 17.3% / 100% 100%,
linear-gradient(
to bottom,
#D2B394,
#C7A582,
)
0% 17.3% / 100% 100%,
rgba(#EDD3B0,1);
background-repeat: no-repeat;
}
}
}
}
}
.goldring {
z-index: 3;
width: 35em;
height: 35em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
// #A47851
linear-gradient(to bottom,
rgba(#A47851,.3), rgba(#AE8760,.7)),
linear-gradient(to bottom,
rgba(#fff,.3), rgba(#AE8760,.3)),
linear-gradient(to bottom,
rgba(#D0AA85,.4), rgba(#AE8760,.3)),
linear-gradient(to bottom,
#ECCCA5, #ECCCA5),
;
&:before{
content: '';
border-radius: 50%;
width: 32.5em;
height: 32.5em;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background:
radial-gradient(
circle at 70% 100% ,
rgba(#fff, .04),
rgba(#131419, .2)
) 50% 50% / 100% 100%,
radial-gradient(
circle at 50% 50% ,
rgba(#2A2C34, .4) 50%,
rgba(#000, .4) 70%,
$t
) 50% 50% / 100% 100%,
radial-gradient(
circle at 50% 50% ,
rgba(#000, 1),
rgba(#28292F, 1),
$t
) 50% 50% / 100% 100%,
radial-gradient(
circle at 50% 50% ,
rgba(#191C23, 1),
rgba(#191C23, 1),
$t
) 50% 50% / 100% 100%,
;
position:absolute;
background-repeat: no-repeat;
}
&:after{
content: '';
width:1.4em;
height: 5em;
left: 102%;
top: 51.4%;
transform: translate(-50%,-50%);
position:absolute;
background-repeat: no-repeat;
}
.time{
width: 32.5em;
height: 32.5em;
border-radius: 50%;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50% ,-50%);
@include on-circle($item-count: 12, $circle-size: 32.5em, $item-size: .5em);
.points{
width: .5em;
height: .3em;
border-radius: 50%;
background: #DCC9B1;
display: block;
}
}
.time_lg{
width: 30em;
height: 30em;
border-radius: 50%;
position: absolute;
top:-43%;
left: 50%;
transform: translate(-50% ,-50%);
@include on-circle($item-count: 12, $circle-size: 28em, $item-size: 2em);
}
.inner{
border: .3px solid #000;
content: '';
border-radius: 50%;
width: 25em;
height: 25em;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background:
// #322F2D
radial-gradient(
circle at 50% 90% ,
rgba(#000, .5),
rgba(red, 0),
$t
) 50% 50% / 100% 100%,
-webkit-radial-gradient(
50% 50%,
circle,
rgba(darkgray,.1),
rgba(#000,.1) 51%,
) 50% 50% / 100% 100%,
radial-gradient(
circle at 15% 0% ,
rgba(#fff, .1),
rgba(#131419, 1)
) 50% 50% / 100% 100%,
radial-gradient(
circle at 70% 0% ,
rgba(#fff, .06),
rgba(#131419, 1)
) 50% 50% / 100% 100%,
radial-gradient(
circle at 75% 0% ,
rgba(#24252D, 1),
rgba(#131419, 1),
$t
) 50% 50% / 100% 100%,
;
position:absolute;
background-repeat: no-repeat;
.handle{
animation: anim 8s infinite;
width: .8em;
height: 12em;
position: absolute;
top: 7em;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 15px;
transform-origin: bottom;
background:
linear-gradient(
to right,
rgba(#333,1),
rgba(#333,1) ,
)
50% 100% /62% 60%,
rgba( #E3C7AA,1);
box-shadow: 2px 4px 1px 2px #000;
background-repeat: no-repeat;
}
.center{
width: 1.5em;
height: 1.5em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background:
radial-gradient(
circle at 50% ,
rgba(#333, 1),
rgba(#333, 1)
) 50% 50% / 12% 12%,
radial-gradient(
circle at 50% ,
rgba(#D8B798, 1),
rgba(#D0A788, 1)
) 50% 50% / 50% 50%,
radial-gradient(
circle at 50% ,
rgba(#D8B798, 1),
rgba(#A98259, 1)
) 50% 50% / 70% 70%,
radial-gradient(
circle at 50% ,
rgba(#D0A788, 1),
rgba(#D0A788, 1)
) 50% 50% / 100% 100%, ;
background-repeat: no-repeat;
}
.handle_short{
width: .8em;
height: 8em;
position: absolute;
top: 66%;
left: 50%;
transform: translate(-50%,-50%) rotate(110deg);
transform-origin: top;
border-radius: 15px;
background:
linear-gradient(
to bottom,
rgba(#333,1),
rgba(#333,1) ,
)
50% 0% /.4em 90%,
rgba( #E3C7AA,1)
;
box-shadow: 1px 1px 1px 2px rgba(#000,.6);
background-repeat: no-repeat;
}
.handle_thin{
width: .2em;
height: 14em;
position: absolute;
top: 50%;
left: 50%;
transform: rotate(20deg);
transform-origin: top;
border-radius: 15px;
background:
linear-gradient(
to bottom,
rgba(#fff,1),
rgba(#fff,1) ,
)
50% 100% /.4em 20%,
rgba( #E3C7AA,1)
;
box-shadow: 1px 1px 1px 2px rgba(#000,.6);
background-repeat: no-repeat;
}
}
background-repeat: no-repeat;
}
.knob{
top: 43.8%;
left: 96.5%;
width: 1.5em;
height:5em;
background:
linear-gradient(to bottom,
rgba(#333,.4) 3%, #E6CBA0 6%,
rgba(#FCF0DE,.9) 40%,
#654429,rgba(#654429,.4),
rgba(#E6C499,.7) 50%,
#D9AB78 60%,#D9AB78 63%,
#E6C499, #D3A271, #977F66, rgba(#333,.3)
),
rgba(#FDF0E0,1);
position: absolute;
left: 100%;
background-repeat: no-repeat;
&:before{
content: '';
width:2em;
height: 5em;
top: 0;
left: -16%;
background:
radial-gradient(50% 200% at 0% 50%, #C6A380 35%, #BE926F 50%, rgba($t, 0) 52%)
23.4% 18% / 5em 5em,
;
position:absolute;
background-repeat: no-repeat;
}
}
@keyframes anim {
to {
transform: translate(-50%,-50%) rotate(360deg);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.