Radar Animation Code:
1.index.html:
<!DOCTYPE html> <html> <head> <title>Radar Animation</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul class="radar"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: url(777.png); } .radar { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; padding: 0; width: 480px; height: 480px; border-radius: 50%; border: 20px solid white; background: black url(777.png); background-size: cover; box-shadow: 0 8px 0 yellow, inset 0 0 100px rgba(255,217,0,0.5); overflow: hidden; } .radar::before { content: ''; position: absolute; top: 85%; left: 40%; width: 10px; height: 10px; background: yellow; border-radius: 50%; filter: blur(2px); animation: glow 1s linear infinite; } .radar::after { content: ''; position: absolute; top: 75%; left: 60%; width: 10px; height: 10px; background: yellow; border-radius: 50%; filter: blur(2px); animation: glow 1s linear infinite; } .radar li:nth-child(1), .radar li:nth-child(2), .radar li:nth-child(3), .radar li:nth-child(4) { list-style: none; position: absolute; top: 50%; height: 1px; width: 100%; border-radius: 50%; background: rgb(217,255,0); } .radar li:nth-child(2) { transform: rotate(90deg); } .radar li:nth-child(3) { transform: rotate(45deg); } .radar li:nth-child(4) { transform: rotate(-45deg); } .radar li:nth-child(5), .radar li:nth-child(6), .radar li:nth-child(7) { list-style: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid rgb(217,255,0); background: transparent; border-radius: 50%; } .radar li:nth-child(5) { width: 120px; height: 120px; } .radar li:nth-child(6) { width: 240px; height: 240px; } .radar li:nth-child(7) { width: 360px; height: 360px; } .radar li:nth-child(8) { list-style: none; position: absolute; top: 50%; left: 50%; width: 250px; height: 250px; transform-origin: top left; background: linear-gradient(45deg, yellow 0%, transparent 50% ); animation: animate 2s linear infinite; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes glow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
