CSS Clock Animation

HTML
<div class="clock"> <div class="wrapper rotate-1"> <div class="inner-1"></div> </div> <div class="wrapper rotate-2"> <div class="inner-2"></div> </div> </div>
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) } }
JAVASCRIPT
Expand for more options Login