-
Notifications
You must be signed in to change notification settings - Fork 0
/
radar.html
91 lines (86 loc) · 2.15 KB
/
radar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Radar User Mapping</title>
<style type="text/css">
#radar{
background-color: #000000;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
border-radius:50%;
overflow:hidden;
}
.panels{
position:absolute;
}
#beam{
position:absolute;
background:url(beam.png) no-repeat center;
border: solid medium #cccccc;
border-radius:50%;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
z-index: 999;
}
.rings {
border-radius: 50%;
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background-color: transparent;
border: thick #00fc00 solid;
animation-name: ani;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 10s;
animation-direction: normal;
}
@keyframes ani {
0% {transform: scale(0.01); opacity: 0;}
1% {transform: scale(0.01); opacity: 0.5;}
10% {transform: scale(0.05); opacity: 1;}
95% {transform: scale(1); opacity: 0.8;}
100% {transform: scale(1); opacity: 0; border: none;}
}
#r2 {animation-delay: -1s;}
#r3 {animation-delay: -2s;}
#r4 {animation-delay: -3s;}
#r5 {animation-delay: -4s;}
#r6 {animation-delay: -5s;}
#r7 {animation-delay: -6s;}
#r8 {animation-delay: -7s;}
#r9 {animation-delay: -8s;}
#r10 {animation-delay: -9s;}
</style>
</head>
<body>
<div id="radar">
<div id="r1" class="rings"></div>
<div id="r2" class="rings"></div>
<div id="r3" class="rings"></div>
<div id="r4" class="rings"></div>
<div id="r5" class="rings"></div>
<div id="r6" class="rings"></div>
<div id="r7" class="rings"></div>
<div id="r8" class="rings"></div>
<div id="r9" class="rings"></div>
<div id="r10" class="rings"></div>
<div id="panel1" class="panels"></div>
<div id="panel2" class="panels"></div>
<div id="panel3" class="panels"></div>
<div id="panel4" class="panels"></div>
<div id="beam"></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="distance.js"></script>
<script type="text/javascript" src="plot-radar.js"></script>
</body>
</html>