Animated Clock Code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animated Clock</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="clock"> <span></span> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: green; } .clock { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; border: 15px solid yellow; border-radius: 50%; background: url(clock.png); background-size: cover; } .clock::before { content: ''; position: absolute; top: calc(50% - 3px); left: 50%; width: 40%; height: 6px; background: black; border-radius: 3px; animation: animate 4s linear infinite; transform-origin: left; } .clock::after { content: ''; position: absolute; top: calc(50% - 3px); left: 50%; width: 40%; height: 6px; background: black; border-radius: 3px; animation: animate 48s linear infinite; transform-origin: left; } span { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 10px; height: 10px; background-color: greenyellow; border-radius: 50%; z-index: 1; } @keyframes animate { 0% { transform: rotate(-90deg); } 100% { transform: rotate(270deg); } }
