1.one-div {
2  position: relative;
3  width: 200px;
4  height: 200px;
5  background: repeating-radial-gradient(circle at 50%, rgba(10, 222, 61,.4), rgba(10, 222, 61,.4) 2px, #000  2px, #000 12px);
6  border-radius: 50%;
7  border: 1px dotted rgba(10, 222, 61,.4);
8  overflow: hidden;
9}
10
11.one-div::before {
12  position: absolute;
13  content: "";
14  top: calc(100% - 25%);
15  left: 50%;
16  transform-origin: 5px 0;
17  transform: translate(-50%, -50%);
18  width: 10px;
19  height: 50%;
20  border-radius: 10px;
21  filter: blur(3px);
22  background-image: linear-gradient(to left, rgba(10, 222, 61, .3) 50% , rgb(10, 222, 61) 50%);
23  opacity: .7;
24  animation: radar-animation 2.5s infinite linear;
25}
26
27.one-div::after {
28  content: "";
29  position: absolute;
30  bottom: 24%;
31  left: 50%;
32  transform: translate(-50%, -50%);
33  width: 6px;
34  height: 6px;
35  border-radius: 3px;
36  background-color: rgba(10, 222, 61,1);
37  animation: dot-animation 2.5s infinite ease-in-out;
38}
39
40@keyframes radar-animation {
41  0% {
42    transform: translate(-50%, -50%) rotate(0);
43  }
44
45  100% {
46    transform: translate(-50%, -50%) rotate(360deg);
47  }
48}
49
50@keyframes dot-animation {
51  50% {
52    opacity: 0;
53    transform: translate(-50%, -50%) scale(2);
54  }
55
56  100% {
57    opacity: 0;
58    transform: translate(-50%, -50%) scale(1);
59  }
60}
61