
.hoverme {
	width: 66px;
	text-align: center;
	padding: 10px 0;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 10px;
	transform: scale(.4);
}
.hoverme h1 {
  color: #fff;
  font-size: 1.5em;
}
.hoverme i {
	position: absolute;
	display: block;
	left: 50%;
	top: 0;
	width: 5px;
	height: 10px;
	background: red;
	opacity: 0;
	animation: bang 1.3s ease-out forwards infinite !important;
}
.hoverme i:nth-of-type(1) {
  transform: translate3d(78px, -29px, 0) rotate(236deg);
  background: #ee00ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(2) {
  transform: translate3d(28px, 83px, 0) rotate(304deg);
  background: aqua;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(3) {
  transform: translate3d(64px, 88px, 0) rotate(356deg);
  background: #00ff91;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(4) {
  transform: translate3d(-49px, -38px, 0) rotate(129deg);
  background: #ff0026;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(5) {
  transform: translate3d(49px, -4px, 0) rotate(304deg);
  background: #ff1a00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(6) {
  transform: translate3d(30px, 61px, 0) rotate(286deg);
  background: #ff4800;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(7) {
  transform: translate3d(-79px, 21px, 0) rotate(246deg);
  background: #ffa600;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(8) {
  transform: translate3d(89px, 39px, 0) rotate(118deg);
  background: #9100ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(9) {
  transform: translate3d(48px, -95px, 0) rotate(53deg);
  background: #ff0091;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(10) {
  transform: translate3d(-93px, 29px, 0) rotate(324deg);
  background: #ff00f7;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(11) {
  transform: translate3d(-74px, 91px, 0) rotate(5deg);
  background: #ff1500;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(12) {
  transform: translate3d(64px, 78px, 0) rotate(141deg);
  background: #88ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(13) {
  transform: translate3d(81px, -85px, 0) rotate(150deg);
  background: #4dff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(14) {
  transform: translate3d(1px, 44px, 0) rotate(311deg);
  background: #ff00dd;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(15) {
  transform: translate3d(-74px, 24px, 0) rotate(86deg);
  background: #00ff2f;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(16) {
  transform: translate3d(54px, 50px, 0) rotate(18deg);
  background: #ff0055;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(17) {
  transform: translate3d(74px, 30px, 0) rotate(302deg);
  background: #0033ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(18) {
  transform: translate3d(-83px, -80px, 0) rotate(49deg);
  background: #00ff99;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(19) {
  transform: translate3d(17px, -39px, 0) rotate(36deg);
  background: #ff001e;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(20) {
  transform: translate3d(-61px, 16px, 0) rotate(339deg);
  background: #00fbff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(21) {
  transform: translate3d(-54px, -13px, 0) rotate(187deg);
  background: #9d00ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(22) {
  transform: translate3d(-58px, 14px, 0) rotate(160deg);
  background: #ff001e;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(23) {
  transform: translate3d(0px, 99px, 0) rotate(216deg);
  background: #c4ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(24) {
  transform: translate3d(21px, 88px, 0) rotate(147deg);
  background: #ff00c8;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(25) {
  transform: translate3d(22px, 97px, 0) rotate(275deg);
  background: #ff005e;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(26) {
  transform: translate3d(17px, 0px, 0) rotate(51deg);
  background: #cc00ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(27) {
  transform: translate3d(-99px, -42px, 0) rotate(21deg);
  background: #8000ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(28) {
  transform: translate3d(-79px, -72px, 0) rotate(157deg);
  background: #5100ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(29) {
  transform: translate3d(-38px, -17px, 0) rotate(157deg);
  background: #001eff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(30) {
  transform: translate3d(-62px, -16px, 0) rotate(44deg);
  background: #4dff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(31) {
  transform: translate3d(81px, -21px, 0) rotate(82deg);
  background: #0037ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(32) {
  transform: translate3d(29px, -15px, 0) rotate(127deg);
  background: #40ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(33) {
  transform: translate3d(-13px, 13px, 0) rotate(213deg);
  background: #00c4ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(34) {
  transform: translate3d(-10px, -82px, 0) rotate(232deg);
  background: #008cff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(35) {
  transform: translate3d(-12px, 98px, 0) rotate(112deg);
  background: #eeff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(36) {
  transform: translate3d(40px, 90px, 0) rotate(356deg);
  background: #84ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(37) {
  transform: translate3d(-22px, 89px, 0) rotate(99deg);
  background: #1a00ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(38) {
  transform: translate3d(-77px, -32px, 0) rotate(317deg);
  background: #44ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(39) {
  transform: translate3d(-46px, -11px, 0) rotate(52deg);
  background: #00ff11;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(40) {
  transform: translate3d(-86px, -6px, 0) rotate(218deg);
  background: #ff0d00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(41) {
  transform: translate3d(55px, 87px, 0) rotate(92deg);
  background: #a200ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(42) {
  transform: translate3d(-57px, -84px, 0) rotate(27deg);
  background: #002fff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(43) {
  transform: translate3d(-52px, 94px, 0) rotate(342deg);
  background: #4dff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(44) {
  transform: translate3d(39px, 78px, 0) rotate(271deg);
  background: #4d00ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(45) {
  transform: translate3d(23px, 1px, 0) rotate(152deg);
  background: #ea00ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(46) {
  transform: translate3d(-34px, 71px, 0) rotate(292deg);
  background: #c400ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(47) {
  transform: translate3d(26px, -79px, 0) rotate(63deg);
  background: #c800ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(48) {
  transform: translate3d(-11px, 14px, 0) rotate(313deg);
  background: #00ff55;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(49) {
  transform: translate3d(-95px, -3px, 0) rotate(222deg);
  background: #006aff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme i:nth-of-type(50) {
  transform: translate3d(47px, -89px, 0) rotate(345deg);
  background: #ff001a;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}

@keyframes bang {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
