JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="radio-wave"></div>
<div class="radio-wave"></div>
<div class="radio-wave"></div>

<div class="antenna">
  <div class="antenna-point"></div>
</div>

CSS

body {
  margin: 0;

  /*Чтобы не появились полосы прокрутки*/
  overflow: hidden;
}
.antenna {
  /*Антенны идет с самого низа и до середины экрана*/
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  top: 50%;
  width: 4px;
  background-color: #8d8d8d;
}

.antenna-point {
  /*Выраниваем наконечник антенны так, чтобы он оказался по центру экрана*/
  width: 24px;
  height: 24px;
  margin-left: -10px;
  margin-top: -12px;

  /*Делаем его круглым*/
  border-radius: 50%;

  /*Задаем цвет и блик для наконечника*/
  background-image: radial-gradient(5px 5px at 25% 25%, #fafafa, #5e5e5e);
}
.radio-wave {
  /*центрируем радиоволны*/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;

  /*Делаем их круглыми*/
  border-radius: 50%;

  /*Анимация будет длиться в течение 6 секунд и  бесконечно*/
  -webkit-animation: airwaves 6s infinite;
  animation: airwaves 6s infinite;
}
.radio-wave:nth-child(2) {
  /*Задаем задержку в 2 секунды*/
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.radio-wave:nth-child(3) {
  /*Аналогично, задержка в 2 + 2 = 4 секунды*/
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

@-webkit-keyframes airwaves {
  0% {
    width: 0;
    height: 0;
    background-color: #b7e7f7;
  }
  100% {
    width: 600px;
    height: 600px;
    background-color: transparent;
  }
}

@keyframes airwaves {
/*В начале анимации задаем цвет радиоволны, ширину и высоту равную нулю*/
  0% {
    width: 0;
    height: 0;
    background-color: #b7e7f7;
  }
  /*Радиоволна распространяется и постепенно рассеивается*/
  100% {
    width: 600px;
    height: 600px;
    background-color: transparent;
  }
}