Let’s create a Radar Animation using HTML and CSS. This cool animation mimics a real radar scanner with smooth rotating effects and pulse-like waves, perfect for loading screens or tech-themed designs.
We’ll use:
- HTML to build the basic radar structure.
- CSS to style it with animations like rotation and pulsing effects.
Whether you’re new to web development or looking to add something fun to your site, this radar animation is a great way to learn about keyframe animations and creative design techniques. Let’s build it and give your project a futuristic feel! 🟢📡
HTML :
This HTML code sets up a simple webpage titled “Radar animation CSS” that uses an external stylesheet (style.css) and Google Fonts. The body contains a #radar div with a #targets div inside, likely for visual radar effects, and an input checkbox (#selector) which might toggle radar elements or animation when styled with CSS.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Radar animation CSS</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap'> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="radar"> <div id="targets"></div> </div> <input type="checkbox" id="selector" /> </body> </html>
CSS :
This CSS styles a radar-like circular animation using gradients and keyframes; it uses CSS variables for customizable colors and effects like radar dots, lines, rotation, and trails. When the checkbox (#selector) is checked, it switches to an alternate radar style (e.g., from green to red) by changing variables like --g, animation speed, and blend mode. The #radar element simulates the radar screen with spinning and glowing effects, while #targets creates moving blips using layered radial-gradient backgrounds, giving the illusion of detected objects on a radar.
:root {
--g: #0f0;
--bg-dots: #010;
--bg-lines: #030;
--bg-screen: #000100;
--bg-light: #B3C7DD;
--bg-dark: #6C7A88;
--white-hi: #f1f1f1;
--white-low: #9d9e9f;
--base: #ffffff;
--dot-opacity: 0.5;
--line-opacity: 0.25;
--radial-opacity: 0.25;
--trail-length: 90deg;
--blend: color-dodge;
--speed: 10s;
}
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body {
height: 100vh;
width: 100vw;
margin: 0;
background:
linear-gradient(to top,
var(--bg-dark), var(--bg-light));
overflow: hidden;
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
align-items: center;
transition: all .3s ease;
&:has(input:checked) {
--g: #f00;
--bg-dots: #f00;
--bg-lines: #700;
--bg-screen: #100;
--blend: darken;
--trail-length: 210deg;
--speed: 3s;
#radar::after {
content: '';
backdrop-filter: blur(0.5px);
}
}
}
#radar {
width: 75vmin;
aspect-ratio: 1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background:
linear-gradient(to bottom,
var(--white-hi), var(--white-low));
box-shadow:
inset 0 -3px 10px rgba(0,0,0,0.25),
0 15px 18px rgba(0,0,0,0.5);
border-radius: 50%;
z-index: 2;
&::before, &::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
aspect-ratio: 1;
border-radius:50%;
transition: all .3s ease;
}
&::before{
z-index:-1;
background-color: var(--bg-screen);
background-image:
linear-gradient(to bottom,
transparent calc(50%),
hsl(from var(--bg-lines) h s l / var(--line-opacity)),
transparent calc(50% + 1px)),
linear-gradient(to right,
transparent calc(50%),
hsl(from var(--bg-lines) h s l / var(--line-opacity)),
transparent calc(50% + 1px)),
linear-gradient(45deg,
transparent calc(50%),
hsl(from var(--bg-lines) h s l / var(--line-opacity)),
transparent calc(50% + 1px)),
linear-gradient(-45deg,
transparent calc(50%),
hsl(from var(--bg-lines) h s l / var(--line-opacity)),
transparent calc(50% + 1px)),
repeating-radial-gradient(
hsl(from var(--bg-lines) h s l / var(--radial-opacity)) 0,
transparent 1px 2.5vmin,
hsl(from var(--bg-lines) h s l / var(--radial-opacity)) calc(2.5vmin + 1px));
}
&::after {
background-image:
conic-gradient(
#000 var(--trail-length), var(--g) 360deg);
mix-blend-mode: var(--blend);
animation: rotate var(--speed) linear infinite;
}
}
#targets {
width: 90%;
height: 90%;
position: relative;
border-radius: 50%;
overflow: hidden;
background:
radial-gradient(circle at 65% 15%, var(--bg-dots), transparent 6px),
radial-gradient(circle at 67% 19%, var(--bg-dots), transparent 4px),
radial-gradient(circle at 68% 16%, var(--bg-dots), transparent 6px),
radial-gradient(circle at 59% 63%, var(--bg-dots), transparent 5px),
radial-gradient(circle at 55% 62%, var(--bg-dots), transparent 8px),
radial-gradient(circle at 15% 36%, var(--bg-dots), transparent 6px),
radial-gradient(circle at 19% 39%, var(--bg-dots), transparent 4px),
radial-gradient(circle at 32% 70%, var(--bg-dots), transparent 6px),
radial-gradient(circle at 28% 53%, var(--bg-dots), transparent 7px),
radial-gradient(circle at 45% 92%, var(--bg-dots), transparent 8px),
radial-gradient(circle at 85% 36%, var(--bg-dots), transparent 6px),
radial-gradient(circle at 89% 45%, var(--bg-dots) 3px, transparent 5px),
radial-gradient(circle at 78% 70%, var(--bg-dots) 4px, transparent 6px),
radial-gradient(circle at 33% 85%, var(--bg-dots) 8px, transparent 10px);
animation: move 120s infinite linear;
background-position: 0 0;
&::after, &::before {
content: '';
position: absolute;
inset: 0;
}
&::after {
background:
radial-gradient(circle at 10% 50%, var(--bg-dots), transparent 5px),
radial-gradient(circle at 90% 50%, var(--bg-dots), transparent 5px),
radial-gradient(circle at 60% 10%, var(--bg-dots), transparent 8px),
radial-gradient(circle at 70% 90%, var(--bg-dots), transparent 5px);
animation: move 200s infinite linear reverse, rotate 200s linear infinite;
}
&::before {
background:
radial-gradient(circle at 45% 50%, var(--bg-dots), transparent 4px),
radial-gradient(circle at 49% 55%, var(--bg-dots), transparent 5px),
radial-gradient(circle at 35% 35%, var(--bg-dots), transparent 6px),
radial-gradient(circle at 45% 15%, var(--bg-dots), transparent 7px),
radial-gradient(circle at 25% 35%, var(--bg-dots), transparent 8px);
animation: move 600s infinite linear reverse, rotate 600s linear infinite;
}
}
@keyframes rotate {
to {transform: translate(-50%, -50%) rotate(1turn)}
}
@keyframes move {
to {background-position: 0 67.5vmin;}
}
#selector {
box-shadow: inset 0 2px 4px #0007;
background: var(--bg-dark);
cursor: pointer;
width: 120px;
height: 30px;
display: block;
position: relative;
appearance: none;
border-radius: 15px;
&::before {
content: 'Ver. 1';
color: var(--bg-dark);
font-weight: 700;
font-size: 1rem;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 60%;
height: 100%;
border-radius: inherit;
background:
linear-gradient(to bottom,
var(--white-hi), var(--white-low));
transition: all .3s ease;
}
&:checked::before {
content: 'Ver. 2';
left: 40%;
}
}In short, making a Radar Animation with HTML and CSS is a fun way to explore creative animations. It’s simple to build and adds a modern, techy vibe to your web pages. Keep experimenting and bring more cool effects to life!
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
