HTML
<div class="contain-animation">
<div class="contain-clock">
<div class="face-1">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="center"></div>
</div>
<div class="face-2">
<div class="line"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
<div class="line line-4"></div>
<div class="line line-5"></div>
<div class="line line-6"></div>
</div>
<div class="arm"></div>
<div class="arm arm-2"></div>
<div class="bell"></div>
<div class="bell bell-2"></div>
<div class="hammer"></div>
<div class="handle"></div>
</div>
</div>
CSS
body {
background: #8fd5d5;
}
header {
position: relative;
margin: 50px auto;
text-align: center;
}
.navigation {
display: inline-block;
margin: 8px;
border: 2px solid #57bebb;
font-family: 'Alegreya Sans', sans-serif;
font-size: 18px;
text-align: center;
text-decoration: none;
line-height: 30px;
color: #57bebb;
width: 120px;
height: 30px;
}
.navigation:hover {
color: white;
border: 2px solid white;
}
.navigation.selected {
color: gray;
border: 2px solid gray;
}
.return {
position: relative;
display: block;
margin: auto;
font-family: 'Alegreya Sans', sans-serif;
font-size: 22px;
text-align: center;
border: 2px solid #57bebb;
padding: 0 15px;
text-decoration: none;
line-height: 40px;
color: #57bebb;
width: 150px;
height: 40px;
}
.return:hover {
color: white;
border: 2px solid white;
}
@media (min-width: 764px) {
.navigation {
margin-right: 30px;
margin-bottom: 10px;
font-size: 20px;
line-height: 40px;
width: 150px;
height: 40px;
}
.navigation:last-of-type {
margin-right: 0;
}
header {
width: 100%;
}
}
.contain-clock {
position: relative;
margin: -200px auto;
width: 155px;
}
.face-1 {
position: absolute;
top: 23px;
left: 23px;
background: white;
border-radius: 50%;
width: 109px;
height: 109px;
z-index: 3;
}
.face-2 {
position: relative;
margin: 400px auto 0px;
background: white;
border: 15px solid #ed6e46;
border-radius: 50%;
width: 125px;
height: 125px;
z-index: 2;
}
.line {
position: absolute;
left: 50%;
margin-left: -3px;
background: gray;
width: 6px;
height: 126px;
}
.line-2 {
left: 63px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg) translate3d(0, 0, 0);
}
.line-3 {
transform: rotate(30deg);
-webkit-transform: rotate(30deg) translate3d(0, 0, 0);
margin-left: -1px;
width: 2px;
}
.line-4 {
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg) translate3d(0, 0, 0);
margin-left: -1px;
width: 2px;
}
.line-5 {
transform: rotate(60deg);
-webkit-transform: rotate(60deg) translate3d(0, 0, 0);
margin-left: -1px;
width: 2px;
}
.line-6 {
transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
margin-left: -1px;
width: 2px;
}
.hour {
position: absolute;
top: 50%;
left: 50%;
margin-left: -4px;
background: #f8b65b;
transform-origin: top;
-webkit-transform-origin: top;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
border-radius: 50px;
width: 8px;
height: 35px;
z-index: 5;
}
.minute {
position: absolute;
top: 5px;
left: 55px;
margin-left: -4px;
background: #f8b65b;
border-radius: 50px;
transform-origin: bottom;
-webkit-transform-origin: bottom;
width: 8px;
height: 50px;
z-index: 3;
animation: tick-tock 3600s steps(60, end) infinite;
-webkit-animation: tick-tock 3600s steps(60, end) infinite;
}
.second {
position: absolute;
top: 5px;
left: 56px;
margin-left: -2px;
background: #333333;
border-radius: 50px;
transform-origin: bottom;
-webkit-transform-origin: bottom;
width: 2px;
height: 50px;
z-index: 5;
animation: tick-tock 60s steps(60, end) infinite;
-webkit-animation: tick-tock 60s steps(60 ,end) infinite;
}
.center {
position: absolute;
top: 62px;
margin-top: -15px;
left: 55px;
margin-left: -8px;
border-radius: 50%;
background: #ed6e46;
width: 16px;
height: 16px;
z-index: 20;
}
.arm {
position: absolute;
top: -50px;
left: 73px;
background: gray;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
border-radius: 50px;
width: 10px;
height: 230px;
z-index: 1;
}
.arm-2 {
left: 71px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
.bell {
position: absolute;
top: -30px;
background: #ed6e46;
border-radius: 50% 50% 10% 10%;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
width: 65px;
height: 35px;
z-index: 2;
}
.bell-2 {
left: 90px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
.hammer {
position: absolute;
top: -25px;
left: 76px;
background: gray;
width: 3px;
height: 30px;
z-index: 1;
}
.hammer:before {
content: '';
display: block;
position: absolute;
left: -6px;
background: gray;
border-radius: 50px;
width: 15px;
height: 5px;
}
.handle {
position: absolute;
top: -68px;
left: 32px;
border: 8px solid gray;
border-radius: 50px 50px 0 0;
width: 75px;
height: 30px;
}
.handle:after {
content: '';
display: block;
position: absolute;
top: 26px;
background: #8fd5d5;
width: 75px;
height: 15px;
}
@keyframes tick-tock {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes tick-tock {
to {
-webkit-transform: rotate(360deg) translate3d(0, 0, 0);
}
}
2 Responses