Skip to content

Instantly share code, notes, and snippets.

@dgeske
Created Mar 7, 2013
Embed
What would you like to do?
CSS Radar - an animated radar built entirely with CSS
/**
* CSS Radar - an animated radar built entirely with CSS
*/
html{
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
min-height: 100%;
}
.screen {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
border: 2px solid #333;
border-radius: 50px;
background:
linear-gradient(green 2px, transparent 2px),
linear-gradient(90deg, green 2px, transparent 2px),
linear-gradient(rgba(0,255,0,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,255,0,.3) 1px, transparent 1px),
rgba(0, 0, 0, .5);
background-size:50% 50% , 50% 50% , 10% 10%, 10% 10%;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.grid {
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle, rgba(50, 0, 0, .5) 0, transparent 50%),
radial-gradient(farthest-side circle, transparent 1%, green 5%, transparent 0),
radial-gradient(farthest-side circle, transparent 11%, green 15%, transparent 0),
radial-gradient(farthest-side circle, transparent 21%, green 25%, transparent 0),
radial-gradient(farthest-side circle, transparent 31%, green 35%, transparent 0),
radial-gradient(farthest-side circle, transparent 41%, green 45%, transparent 0),
radial-gradient(farthest-side circle, transparent 51%, green 55%, transparent 0);
background-size: 100%;
}
@keyframes clockwise {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes blip {
from { opacity: 1; }
/*70% { opacity: .3; }*/
to { opacity: .1; }
}
.radar, .blip {
animation-duration: 6s;
animation-iteration-count: infinite;
}
.radar {
width: 10%;
min-height: 100%;
animation-name: clockwise;
animation-timing-function: linear;
transform-origin: right bottom;
background: linear-gradient(70deg, transparent 50%, green), transparent;
position: absolute;
top: -50%;
left: 40%;
}
.blip {
display: block;
position: absolute;
animation-name: blip;
animation-timing-function: ease-out;
color: red;
font-size: 2em;
}
.blip:after {
content: "✈";
}
#id1 {
left: 51%;
top: 28%;
animation-delay: .2s;
transform: rotate(120deg);
}
#id2 {
left: 55%;
top: 50%;
animation-delay: 1.7s;
transform: rotate(310deg);
}
#id3 {
left: 48%;
top: 78%;
animation-delay: 3.1s;
transform: rotate(320deg);
}
#id4 {
left: 46%;
top: 98%;
animation-delay: 3.2s;
transform: rotate(310deg);
}
<div class="screen">
<div class="grid">
<div class="radar"></div>
<span class="blip" id="id1"></span>
<span class="blip" id="id2"></span>
<span class="blip" id="id3"></span>
<span class="blip" id="id4"></span>
</div>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment