<style>
.texto-ganador {
  font-weight:bold;
  animation: ganador 1s linear infinite;
}

@keyframes ganador {
  50% {
    opacity: 0.5;
  }
}

.texto-ganador {
    z-index:1000;
}
.balloon {
  display:inline-block;
   width:100px;
  height:125px;
  background:hsl(215,50%,65%);
  border-radius:80%;
  position:absolute;
  box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
  margin:20px 30px;
  transition:transform 0.5s ease;
  z-index:-1;
  animation:balloons 4s ease-in-out infinite;
  transform-origin:bottom center;

}

@keyframes balloons {
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-25px) rotate(4deg); }
}


.balloon:before {
  content:"▲";
  font-size:20px;
  color:hsl(23,55%,57%);
  display:block;
  text-align:center;
  width:100%;
  position:absolute;
  bottom:-12px;
  z-index:-100;
}

.balloon:after {
 display:inline-block; top:153px;
  position:absolute;
  height:250px;
  width:1px;
  left: 49px;
  margin:0 auto;
  content:"";
  background:rgba(0,0,0,0.2); 
}

.balloon:nth-child(2){ background:hsl(23,55%,57%); animation-duration:3.5s; }
.balloon:nth-child(2):before { color:hsl(hsl(23,44%,46%));  }

.balloon:nth-child(3){ background:hsl(139,50%,60%); animation-duration:3s; }
.balloon:nth-child(3):before { color:hsl(139,30%,50%);  }

.balloon:nth-child(4){ background:hsl(59,50%,58%); animation-duration:4.5s; }
.balloon:nth-child(4):before { color:hsl(59,30%,52%);  }

.balloon:nth-child(5){ background:hsl(23,55%,57%); animation-duration:5s; }
.balloon:nth-child(5):before { color:hsl(23,44%,46%);  }
</style>
<div class="balloon"></div>
<h1 class="text-center text-success texto-ganador">GANADOR: <?= $participante->TEX_NOMPAR.' '.$participante->TEX_APEPAR ?></h1>
<h1  class="text-center text-success texto-ganador"><?= $participante->TEX_NOMAGE ?></h1>
