@keyframes bang {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
   }
}
.hoverme {
   
    padding: 10px 0;
    /* cursor: pointer; */
    position: relative;
}

.hoverme i {
    position: absolute;
    display: block;
    right:8%;
    top: 25px;
    width: 7px;
    height: 5px;
    background: red;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(1) {
    transform: translate3d(45px, -80px, 0) rotate(4deg);
    background: rgba(255, 204, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(2) {
    transform: translate3d(26px, -46px, 0) rotate(239deg);
    background: rgba(255, 0, 119, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(3) {
    transform: translate3d(18px, 56px, 0) rotate(90deg);
    background: rgba(255, 94, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(4) {
    transform: translate3d(18px, 98px, 0) rotate(208deg);
    background: rgba(0, 255, 60, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(5) {
    transform: translate3d(-17px, 60px, 0) rotate(239deg);
    background: rgba(255, 0, 157, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(6) {
    transform: translate3d(82px, -33px, 0) rotate(56deg);
    background: rgba(153, 0, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(7) {
    transform: translate3d(-23px, -95px, 0) rotate(135deg);
    background: rgba(145, 255, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(8) {
    transform: translate3d(57px, -41px, 0) rotate(265deg);
    background: rgba(0, 25, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(9) {
    transform: translate3d(63px, 11px, 0) rotate(62deg);
    background: rgba(0, 255, 183, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(10) {
    transform: translate3d(-36px, 97px, 0) rotate(321deg);
    background: rgba(0, 255, 242, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(11) {
    transform: translate3d(3px, -52px, 0) rotate(95deg);
    background: rgba(119, 255, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(12) {
    transform: translate3d(-11px, 15px, 0) rotate(74deg);
    background: rgba(255, 136, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(13) {
    transform: translate3d(42px, 96px, 0) rotate(291deg);
    background: rgba(255, 119, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(14) {
    transform: translate3d(73px, 82px, 0) rotate(132deg);
    background: rgba(0, 43, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(15) {
    transform: translate3d(-69px, -88px, 0) rotate(12deg);
    background: rgba(217, 255, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(16) {
    transform: translate3d(0px, 7px, 0) rotate(319deg);
    background: rgba(0, 196, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(17) {
    transform: translate3d(38px, 77px, 0) rotate(183deg);
    background: rgba(123, 255, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(18) {
    transform: translate3d(-15px, -96px, 0) rotate(88deg);
    background: rgba(0, 174, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(19) {
    transform: translate3d(-91px, -65px, 0) rotate(59deg);
    background: rgba(76, 255, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(20) {
    transform: translate3d(-81px, -69px, 0) rotate(291deg);
    background: rgba(8, 0, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(21) {
    transform: translate3d(30px, 25px, 0) rotate(335deg);
    background: rgba(0, 132, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(22) {
    transform: translate3d(-17px, 66px, 0) rotate(187deg);
    background: rgba(255, 0, 68, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(23) {
    transform: translate3d(-77px, -20px, 0) rotate(181deg);
    background: rgba(255, 140, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(24) {
    transform: translate3d(-9px, 71px, 0) rotate(329deg);
    background: rgba(208, 0, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(25) {
    transform: translate3d(-82px, 55px, 0) rotate(312deg);
    background: rgba(64, 255, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(26) {
    transform: translate3d(-95px, -33px, 0) rotate(3deg);
    background: rgba(60, 255, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(27) {
    transform: translate3d(-19px, -68px, 0) rotate(335deg);
    background: rgba(255, 34, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(28) {
    transform: translate3d(60px, -25px, 0) rotate(252deg);
    background: rgba(255, 38, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(29) {
    transform: translate3d(58px, -51px, 0) rotate(74deg);
    background: rgba(0, 208, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(30) {
    transform: translate3d(50px, -86px, 0) rotate(129deg);
    background: rgba(255, 128, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(31) {
    transform: translate3d(-19px, -45px, 0) rotate(26deg);
    background: rgba(0, 255, 47, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(32) {
    transform: translate3d(-52px, -4px, 0) rotate(118deg);
    background: rgba(94, 0, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(33) {
    transform: translate3d(28px, -24px, 0) rotate(177deg);
    background: rgba(0, 30, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(34) {
    transform: translate3d(-61px, -16px, 0) rotate(231deg);
    background: rgba(255, 0, 43, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(35) {
    transform: translate3d(-2px, 25px, 0) rotate(201deg);
    background: rgba(0, 255, 17, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(36) {
    transform: translate3d(17px, 9px, 0) rotate(157deg);
    background: rgba(0, 255, 81, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(37) {
    transform: translate3d(-1px, -66px, 0) rotate(135deg);
    background: rgba(166, 0, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(38) {
    transform: translate3d(58px, -23px, 0) rotate(197deg);
    background: rgba(51, 0, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(39) {
    transform: translate3d(9px, 8px, 0) rotate(276deg);
    background: rgba(255, 242, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(40) {
    transform: translate3d(52px, -95px, 0) rotate(134deg);
    background: rgba(255, 115, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(41) {
    transform: translate3d(-39px, 26px, 0) rotate(110deg);
    background: rgba(255, 0, 242, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(42) {
    transform: translate3d(-98px, -93px, 0) rotate(329deg);
    background: rgba(119, 0, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(43) {
    transform: translate3d(-23px, 100px, 0) rotate(198deg);
    background: rgba(0, 255, 77, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(44) {
    transform: translate3d(88px, 57px, 0) rotate(52deg);
    background: rgba(30, 0, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(45) {
    transform: translate3d(-72px, -89px, 0) rotate(46deg);
    background: rgba(179, 255, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(46) {
    transform: translate3d(89px, -29px, 0) rotate(140deg);
    background: rgba(0, 72, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(47) {
    transform: translate3d(23px, -50px, 0) rotate(25deg);
    background: rgba(0, 255, 115, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(48) {
    transform: translate3d(-16px, 13px, 0) rotate(54deg);
    background: rgba(128, 0, 255, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(49) {
    transform: translate3d(26px, 53px, 0) rotate(27deg);
    background: rgba(255, 255, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}
.hoverme:hover i:nth-of-type(50) {
    transform: translate3d(-94px, 96px, 0) rotate(159deg);
    background: rgba(81, 255, 0, 1);
    animation: bang 500ms ease-out forwards;
    opacity: 0;
}