CSS
html, body {
background-color: #34495e;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.clock {
width: 100px;
height: 100px;
border: 6px solid #fff;
border-radius: 50%;
}
.wrapper {
width: 100px;
height: 100px;
position: absolute;
}
.inner-1, .inner-2 {
border-radius: 10px;
background-color: #fff;
position: absolute;
top: calc(50% - (10px /2));
left: calc(50% - (10px /2));
}
.inner-1 {
width: 50px;
height: 10px;
}
.inner-2 {
width: 50px;
height: 10px;
}
.rotate-1 {
animation: rotate 1s linear infinite;
}
.rotate-2 {
animation: rotate 10s linear infinite;
}
@keyframes rotate {
to { transform: rotate(360deg) }
}
