@keyframes bang {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.hoverme {
  width: 100%;
  margin: 1px auto 0;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
}
.hoverme span {
  color: #333;
  font-size: 0.9em;
}
.hoverme i {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 10px;
  background: red;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(1) {
  transform: translate3d(-29px, -92px, 0) rotate(186deg);
  background: #00b7ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(2) {
  transform: translate3d(-21px, -93px, 0) rotate(148deg);
  background: #9900ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(3) {
  transform: translate3d(52px, -70px, 0) rotate(69deg);
  background: #ff003c;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(4) {
  transform: translate3d(5px, -59px, 0) rotate(298deg);
  background: #00ff15;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(5) {
  transform: translate3d(52px, -55px, 0) rotate(25deg);
  background: #ff0040;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(6) {
  transform: translate3d(36px, -97px, 0) rotate(349deg);
  background: #ff0026;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(7) {
  transform: translate3d(-34px, -50px, 0) rotate(122deg);
  background: #ff00c4;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(8) {
  transform: translate3d(-40px, -65px, 0) rotate(112deg);
  background: #0084ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(9) {
  transform: translate3d(-26px, -96px, 0) rotate(11deg);
  background: #2200ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(10) {
  transform: translate3d(-30px, -50px, 0) rotate(213deg);
  background: #4dff00;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(11) {
  transform: translate3d(-70px, -90px, 0) rotate(55deg);
  background: #00fffb;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(12) {
  transform: translate3d(-98px, -76px, 0) rotate(304deg);
  background: #ff7700;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(13) {
  transform: translate3d(-12px, -99px, 0) rotate(278deg);
  background: #ff00dd;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(14) {
  transform: translate3d(-92px, -68px, 0) rotate(239deg);
  background: #aa00ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(15) {
  transform: translate3d(23px, -70px, 0) rotate(126deg);
  background: #ff006f;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(16) {
  transform: translate3d(-29px, -75px, 0) rotate(112deg);
  background: #ff1a00;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(17) {
  transform: translate3d(-38px, -94px, 0) rotate(259deg);
  background: #0095ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(18) {
  transform: translate3d(-56px, -82px, 0) rotate(87deg);
  background: #0400ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(19) {
  transform: translate3d(73px, -94px, 0) rotate(80deg);
  background: #80ff00;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(20) {
  transform: translate3d(-20px, -81px, 0) rotate(291deg);
  background: #c8ff00;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(21) {
  transform: translate3d(6px, -85px, 0) rotate(37deg);
  background: #55ff00;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(22) {
  transform: translate3d(-93px, -83px, 0) rotate(162deg);
  background: #ee00ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(23) {
  transform: translate3d(-25px, -58px, 0) rotate(138deg);
  background: #00ff15;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(24) {
  transform: translate3d(-23px, -70px, 0) rotate(179deg);
  background: #4d00ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(25) {
  transform: translate3d(6px, -60px, 0) rotate(279deg);
  background: #ff00ae;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(26) {
  transform: translate3d(-31px, -83px, 0) rotate(217deg);
  background: #ff00a6;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(27) {
  transform: translate3d(72px, -79px, 0) rotate(73deg);
  background: #ff1a00;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(28) {
  transform: translate3d(45px, -99px, 0) rotate(194deg);
  background: #0059ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(29) {
  transform: translate3d(82px, -58px, 0) rotate(232deg);
  background: #ff0d00;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(30) {
  transform: translate3d(-63px, -58px, 0) rotate(226deg);
  background: #000dff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(31) {
  transform: translate3d(-77px, -87px, 0) rotate(295deg);
  background: #00ff51;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(32) {
  transform: translate3d(28px, -98px, 0) rotate(37deg);
  background: #ff0004;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(33) {
  transform: translate3d(-2px, -52px, 0) rotate(181deg);
  background: #00ff77;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(34) {
  transform: translate3d(1px, -51px, 0) rotate(121deg);
  background: #ff0033;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(35) {
  transform: translate3d(57px, -93px, 0) rotate(293deg);
  background: #5100ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(36) {
  transform: translate3d(-87px, -91px, 0) rotate(347deg);
  background: #00ff48;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(37) {
  transform: translate3d(11px, -95px, 0) rotate(318deg);
  background: #ff9100;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(38) {
  transform: translate3d(5px, -99px, 0) rotate(37deg);
  background: #ff00b3;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(39) {
  transform: translate3d(-11px, -75px, 0) rotate(290deg);
  background: #0080ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(40) {
  transform: translate3d(17px, -56px, 0) rotate(207deg);
  background: #00c4ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(41) {
  transform: translate3d(76px, -79px, 0) rotate(245deg);
  background: #bb00ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(42) {
  transform: translate3d(-71px, -82px, 0) rotate(75deg);
  background: red;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(43) {
  transform: translate3d(-42px, -79px, 0) rotate(249deg);
  background: #2fff00;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(44) {
  transform: translate3d(-87px, -75px, 0) rotate(119deg);
  background: #4000ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(45) {
  transform: translate3d(14px, -50px, 0) rotate(354deg);
  background: #00a6ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(46) {
  transform: translate3d(21px, -60px, 0) rotate(82deg);
  background: #009dff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(47) {
  transform: translate3d(-73px, -98px, 0) rotate(107deg);
  background: #0091ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(48) {
  transform: translate3d(16px, -62px, 0) rotate(99deg);
  background: #00a6ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(49) {
  transform: translate3d(16px, -65px, 0) rotate(147deg);
  background: #ffbb00;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(50) {
  transform: translate3d(-85px, -74px, 0) rotate(217deg);
  background: #0022ff;
  animation: bang 1000ms ease-out forwards;
  opacity: 0;
}