.star {
  background: yellow;
  width: 12px;
  height: 12px;
  -webkit-clip-path: polygon(45% 11%, 54% 42%, 87% 47%, 55% 52%, 50% 89%, 42% 53%, 8% 48%, 35% 41%);
clip-path: polygon(45% 11%, 54% 42%, 87% 47%, 55% 52%, 50% 89%, 42% 53%, 8% 48%, 35% 41%);
  animation: shine 5s infinite normal linear, opacity 5s infinite normal linear;
}

.bstar {
  background: rgb(0, 170, 255);
  width: 12px;
  height: 12px;
  -webkit-clip-path: polygon(45% 11%, 54% 42%, 87% 47%, 55% 52%, 50% 89%, 42% 53%, 8% 48%, 35% 41%);
clip-path: polygon(45% 11%, 54% 42%, 87% 47%, 55% 52%, 50% 89%, 42% 53%, 8% 48%, 35% 41%);
  animation: shine 5s infinite normal linear, opacity 5s infinite normal linear;
}

.red {
  background: red;
  width: 12px;
  height: 12px;
  -webkit-clip-path: polygon(45% 11%, 54% 42%, 87% 47%, 55% 52%, 50% 89%, 42% 53%, 8% 48%, 35% 41%);
clip-path: polygon(45% 11%, 54% 42%, 87% 47%, 55% 52%, 50% 89%, 42% 53%, 8% 48%, 35% 41%);
  animation: shine 5s infinite normal linear, opacity 5s infinite normal linear;
}

@keyframes shine {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes opacity {
  0%, 40%, 100% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
}