Skip to content

Instantly share code, notes, and snippets.

@dgeske

dgeske/dabblet.css

Created March 6, 2013 05:20
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save dgeske/5096929 to your computer and use it in GitHub Desktop.
Save dgeske/5096929 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Radar - an animated radar built entirely with CSS
Raw
dabblet.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%;
}
Raw
dabblet.html
<!-- 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>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"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