JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<script src="https://terre-noire.fr/pow/game/src/img/load_menu.png"></script>
<div class="menu">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
  <div class="circle4"></div>
  <div class="circle5"></div>
  <div class="finger"></div>
</div>

CSS

html, body {
  background:transparent;
}

.menu {
  width:90px;
  height:90px;
  position:relative;
  bottom:0;
  right:0;
  background:rgba(0,0,0,.7);
  border-radius:100%;
}

.circle1 {
  background:none;
  position:absolute;
  width:70px;
  height:70px;
  top:2px;
  left:2px;
  border:#8af5ff 2px solid;
  border-radius:100%;
  animation:c1 infinite 1s
}

.circle2 {
  background:none;
  position:absolute;
  width:70px;
  height:70px;
  border:#8af5ff 1px solid;
  border-radius:100%;
  top:9px;
  left:9px;
  opacity:0.5;
  animation:c2 infinite 4s;
}

.circle3 {
  background:url(https://terre-noire.fr/pow/game/src/img/load_menu.png);
  position:absolute;
  width:70px;
  height:70px;
  top:10px;
  left:10px;
  opacity:1;
  animation:c3 infinite 5s;
}

.circle4 {
  width:87px;
  height:87px;
  background:url(https://terre-noire.fr/pow/game/src/img/big_l.png) no-repeat;
  position:absolute;
  left:2px;
  top:2px;
  animation:circle4 infinite 3s;
}

.circle5 {
  width:60px;
  height:60px;
  background:url(https://terre-noire.fr/pow/game/src/img/sm_l.png) no-repeat;
  position:absolute;
  left:16px;
  top:16px;
  animation:circle5 infinite 5s;
}

.finger {
  background:url(https://terre-noire.fr/pow/game/src/img/fingerprint.png) no-repeat;
  position:absolute;
  top:23px;
  left:28px;
  width:35px;
  height:45px;
}

@keyframes c1 {
  0% {top:9.5px;left:9.5px;border:#34eeff 1px solid;opacity:0.5}
  50% {top:7px;left:7px;border:#c7faff 3px solid;opacity:0.5}
  100% {top:9.5px;left:9.5px;border:#34eeff 1px solid;opacity:0.5}
}

@keyframes c2 {
  0% {transform:scale(.6, .6);opacity:0;}
  50% {transform:scale(1, 1);opacity:0.5;}
  100% {transform:scale(.6, .6);opacity:0;}
}

@keyframes c3 {
  0% {transform:rotate(0deg);}
  25 {transform:rotate(65deg);}
  50% {transform:rotate(-10deg);}
  75% {transform:rotate(50deg);}
  95% {transform:rotate(-65deg);}
}

@keyframes circle4 {
  0% {transform:rotate(0deg);}
  25 {transform:rotate(65deg);}
  50% {transform:rotate(-10deg);}
 ...