@keyframes bang{from{transform:translate3d(0,0,0);opacity:1}}.hoverme{max-width:700px;margin:24px auto 0;text-align:center;padding:5px 0;cursor:pointer;position:relative}@media only screen and (min-width:500px){.hoverme{margin:32px auto 0}}.hoverme i{position:absolute;display:block;left:50%;top:0;width:4px;height:8px;background:red;opacity:0}.hoverme:hover i:nth-of-type(1){transform:translate3d(46px,82px,0) rotate(333deg);background:#2dd287;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(2){transform:translate3d(-46px,-10px,0) rotate(1deg);background:#ff00b3;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(3){transform:translate3d(-88px,84px,0) rotate(182deg);background:#00ff80;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(4){transform:translate3d(-35px,-84px,0) rotate(213deg);background:#ffea00;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(5){transform:translate3d(30px,-54px,0) rotate(16deg);background:#f7ff00;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(6){transform:translate3d(24px,56px,0) rotate(130deg);background:#3928d7;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(7){transform:translate3d(78px,-96px,0) rotate(246deg);background:#fd0;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(8){transform:translate3d(25px,83px,0) rotate(179deg);background:#9100ff;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(9){transform:translate3d(48px,44px,0) rotate(65deg);background:#4d00ff;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(10){transform:translate3d(-31px,63px,0) rotate(94deg);background:#ff001e;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(11){transform:translate3d(67px,83px,0) rotate(352deg);background:#ff00c4;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(12){transform:translate3d(-84px,8px,0) rotate(122deg);background:#f0e;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(13){transform:translate3d(61px,38px,0) rotate(265deg);background:#00ffae;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(14){transform:translate3d(-72px,-58px,0) rotate(273deg);background:#0f6;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(15){transform:translate3d(-74px,37px,0) rotate(358deg);background:#ae00ff;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(16){transform:translate3d(11px,76px,0) rotate(268deg);background:deepskyblue;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(17){transform:translate3d(-83px,-77px,0) rotate(259deg);background:#2dd287;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(18){transform:translate3d(-83px,52px,0) rotate(300deg);background:#ff1a00;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(19){transform:translate3d(-59px,1px,0) rotate(152deg);background:#00d5ff;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(20){transform:translate3d(37px,-42px,0) rotate(7deg);background:#ff0040;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(21){transform:translate3d(-25px,-61px,0) rotate(227deg);background:#1a00ff;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(22){transform:translate3d(-98px,-75px,0) rotate(302deg);background:#0f5;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(23){transform:translate3d(-85px,13px,0) rotate(350deg);background:lime;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(24){transform:translate3d(-49px,55px,0) rotate(172deg);background:#fb0;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(25){transform:translate3d(60px,-57px,0) rotate(240deg);background:#ff7b00;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(26){transform:translate3d(-90px,21px,0) rotate(12deg);background:#00ff04;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(27){transform:translate3d(-80px,-35px,0) rotate(197deg);background:#f0d;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(28){transform:translate3d(76px,-55px,0) rotate(357deg);background:#005eff;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(29){transform:translate3d(-32px,34px,0) rotate(106deg);background:#f40;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(30){transform:translate3d(-93px,97px,0) rotate(283deg);background:#3c00ff;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(31){transform:translate3d(-21px,17px,0) rotate(209deg);background:#5eff00;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(32){transform:translate3d(84px,-12px,0) rotate(292deg);background:#e100ff;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(33){transform:translate3d(-39px,93px,0) rotate(266deg);background:#ff4800;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(34){transform:translate3d(-96px,47px,0) rotate(212deg);background:#bfff00;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(35){transform:translate3d(-34px,78px,0) rotate(271deg);background:#ff00e1;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(36){transform:translate3d(-55px,-36px,0) rotate(146deg);background:#ff0073;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(37){transform:translate3d(-82px,33px,0) rotate(114deg);background:#ef0;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(38){transform:translate3d(79px,92px,0) rotate(280deg);background:#ff005e;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(39){transform:translate3d(-95px,75px,0) rotate(323deg);background:#3cff00;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(40){transform:translate3d(-54px,-19px,0) rotate(1deg);background:#1f0;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(41){transform:translate3d(-93px,61px,0) rotate(106deg);background:#00ffc4;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(42){transform:translate3d(-56px,-74px,0) rotate(308deg);background:#0051ff;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(43){transform:translate3d(-11px,0px,0) rotate(321deg);background:#ff00b3;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(44){transform:translate3d(-14px,-27px,0) rotate(314deg);background:#0fd;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(45){transform:translate3d(5px,26px,0) rotate(300deg);background:#a200ff;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(46){transform:translate3d(-76px,89px,0) rotate(79deg);background:#4dff00;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(47){transform:translate3d(-64px,-56px,0) rotate(209deg);background:#ff0095;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(48){transform:translate3d(19px,-32px,0) rotate(278deg);background:#0059ff;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(49){transform:translate3d(-17px,44px,0) rotate(355deg);background:#0f4;animation:bang 700ms ease-out forwards;opacity:0}.hoverme:hover i:nth-of-type(50){transform:translate3d(-5px,-44px,0) rotate(257deg);background:#ff4800;animation:bang 700ms ease-out forwards;opacity:0}@keyframes bang{from{transform:translate3d(0,0,0);opacity:1}}