Skip to content

Instantly share code, notes, and snippets.

@dgeske
Created Mar 6, 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: black;
min-height: 100%;
text-align: center;
}
@keyframes blip {
from { opacity: 1; }
70% { opacity: .4; }
to { opacity: .2; }
}
.blip {
z-index: 1;
position: absolute;
display: inline;
animation: blip 2s infinite ease-out;
transform-origin: center;
color: green;
font-size: 2em;
}
#1 {
left: 51%;
top: 28%;
animation-delay: 0s;
}
#2 {
left: 55%;
top: 50%;
animation-delay: 0.5s;
}
#3 {
left: 48%;
top: 78%;
animation-delay: 1s;
}
@keyframes clockwise {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.beam {
display: inline-block;
width: 10%;
min-height: 100%;
animation: clockwise 2s linear infinite;
transform-origin: 100% 100%;
background: linear-gradient(70deg, transparent 30%, green), transparent;
position: absolute;
top: -50%;
left: 40%;
}
.screen {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
background:
radial-gradient(farthest-side circle, transparent 5%, green 6%, transparent 0),
radial-gradient(farthest-side circle, transparent 15%, green 16%, transparent 0),
radial-gradient(farthest-side circle, transparent 25%, green 26%, transparent 0);
background-size: 200% 200%;
background-position: 50% 50%;
}
<!-- content to be placed inside <body>…</body> -->
<div class="screen">
<div class="blip" id="1">&#9992;</div>
<div class="blip" id="2">&#9992;</div>
<div class="blip" id="3">&#9992;</div>
<div class="beam" />
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
@BlackKnightWing
Copy link

BlackKnightWing commented Nov 18, 2015

como llamo la funcion para el radar??.. disculpen soy nuevo en hojas de estillo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment