@keyframes bang {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.hoverme {
  text-align: center;
  position: relative;
}
.hoverme i {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  width: 3px;
  height: 5px;
  background: red;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(1) {
  transform: translate3d(-63px, -50px, 0) rotate(345deg);
  background: #ff0044;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(2) {
  transform: translate3d(-73px, -68px, 0) rotate(141deg);
  background: #6aff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(3) {
  transform: translate3d(6px, -70px, 0) rotate(104deg);
  background: #ffe100;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(4) {
  transform: translate3d(-75px, -99px, 0) rotate(182deg);
  background: #ff006a;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(5) {
  transform: translate3d(40px, -99px, 0) rotate(65deg);
  background: #ff00d5;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(6) {
  transform: translate3d(-36px, -92px, 0) rotate(203deg);
  background: #d000ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(7) {
  transform: translate3d(0px, -69px, 0) rotate(295deg);
  background: #7b00ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(8) {
  transform: translate3d(8px, -85px, 0) rotate(246deg);
  background: #ff0099;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(9) {
  transform: translate3d(4px, -93px, 0) rotate(151deg);
  background: #0091ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(10) {
  transform: translate3d(-25px, -50px, 0) rotate(259deg);
  background: #00ff40;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(11) {
  transform: translate3d(51px, -81px, 0) rotate(64deg);
  background: #0dff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(12) {
  transform: translate3d(29px, -57px, 0) rotate(178deg);
  background: #15ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(13) {
  transform: translate3d(90px, -56px, 0) rotate(135deg);
  background: #84ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(14) {
  transform: translate3d(-36px, -83px, 0) rotate(85deg);
  background: #ff9100;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(15) {
  transform: translate3d(-84px, -89px, 0) rotate(223deg);
  background: #8800ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(16) {
  transform: translate3d(-11px, -61px, 0) rotate(305deg);
  background: deepskyblue;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(17) {
  transform: translate3d(-36px, -88px, 0) rotate(138deg);
  background: #8cff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(18) {
  transform: translate3d(0px, -76px, 0) rotate(252deg);
  background: #ff00e6;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(19) {
  transform: translate3d(-31px, -54px, 0) rotate(207deg);
  background: #ff00b3;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(20) {
  transform: translate3d(-91px, -91px, 0) rotate(103deg);
  background: #00ff22;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(21) {
  transform: translate3d(-78px, -88px, 0) rotate(144deg);
  background: #00ffd0;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(22) {
  transform: translate3d(-39px, -85px, 0) rotate(279deg);
  background: #6600ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(23) {
  transform: translate3d(-90px, -75px, 0) rotate(213deg);
  background: #73ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(24) {
  transform: translate3d(-8px, -76px, 0) rotate(111deg);
  background: #04ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(25) {
  transform: translate3d(-13px, -76px, 0) rotate(90deg);
  background: #ff4000;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(26) {
  transform: translate3d(26px, -91px, 0) rotate(40deg);
  background: #b7ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(27) {
  transform: translate3d(-2px, -80px, 0) rotate(223deg);
  background: #00a2ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(28) {
  transform: translate3d(-19px, -56px, 0) rotate(293deg);
  background: #2200ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(29) {
  transform: translate3d(34px, -97px, 0) rotate(293deg);
  background: #44ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(30) {
  transform: translate3d(19px, -74px, 0) rotate(320deg);
  background: #ff00cc;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(31) {
  transform: translate3d(77px, -77px, 0) rotate(140deg);
  background: #ffb700;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(32) {
  transform: translate3d(34px, -63px, 0) rotate(224deg);
  background: #ffae00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(33) {
  transform: translate3d(-37px, -54px, 0) rotate(338deg);
  background: #7b00ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(34) {
  transform: translate3d(80px, -50px, 0) rotate(37deg);
  background: #00ffcc;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(35) {
  transform: translate3d(49px, -88px, 0) rotate(63deg);
  background: #66ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(36) {
  transform: translate3d(-38px, -80px, 0) rotate(153deg);
  background: #009dff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(37) {
  transform: translate3d(60px, -51px, 0) rotate(252deg);
  background: #ff8000;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(38) {
  transform: translate3d(-80px, -78px, 0) rotate(270deg);
  background: #1eff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(39) {
  transform: translate3d(-2px, -74px, 0) rotate(217deg);
  background: #00ff15;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(40) {
  transform: translate3d(62px, -88px, 0) rotate(239deg);
  background: #0011ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(41) {
  transform: translate3d(-44px, -55px, 0) rotate(209deg);
  background: #ffe100;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(42) {
  transform: translate3d(59px, -62px, 0) rotate(140deg);
  background: #f2ff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(43) {
  transform: translate3d(-54px, -65px, 0) rotate(355deg);
  background: #e100ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(44) {
  transform: translate3d(-91px, -52px, 0) rotate(213deg);
  background: #ff0051;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(45) {
  transform: translate3d(53px, -66px, 0) rotate(293deg);
  background: #ffc400;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(46) {
  transform: translate3d(-54px, -75px, 0) rotate(21deg);
  background: #ff00b7;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(47) {
  transform: translate3d(-96px, -76px, 0) rotate(270deg);
  background: #5eff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(48) {
  transform: translate3d(-4px, -59px, 0) rotate(97deg);
  background: #0099ff;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(49) {
  transform: translate3d(-87px, -74px, 0) rotate(291deg);
  background: #ddff00;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(50) {
  transform: translate3d(-99px, -98px, 0) rotate(321deg);
  background: #ff00bf;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}