Skip to content

Instantly share code, notes, and snippets.

@dgeske
Created March 6, 2013 05:20
Show Gist options
  • Save dgeske/5096929 to your computer and use it in GitHub Desktop.
Save dgeske/5096929 to your computer and use it in GitHub Desktop.
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

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