.magic{display:inline-block;margin:50px;position:relative;--r:100px}.magic i{color:orange;filter:grayscale(100%)}.magic:hover i{animation:change 1s forwards}@keyframes change{50%{transform:scale(0);filter:grayscale(100%)}51%{filter:grayscale(0)}to{transform:scale(1);filter:grayscale(0)}}@keyframes explodeBefore{to{border-width:0;transform:scale(1)}}@keyframes explodeAfter{to{transform:scale(1);opacity:0;background-size:0 0}}.magic:before{top:calc(50% - var(--r));left:calc(50% - var(--r));width:calc(2*var(--r));height:calc(2*var(--r));border-radius:50%;border:var(--r) solid orange;box-sizing:border-box;animation:explodeBefore 1s forwards}.magic i:after,.magic:after,.magic:before{content:"";position:absolute;transform:scale(0)}.magic i:after,.magic:after{width:calc(4*var(--r));height:calc(4*var(--r));left:calc(50% - 2*var(--r));top:calc(50% - 2*var(--r));--c1:radial-gradient(circle,red 50%,transparent 60%);--c2:radial-gradient(circle,orange 50%,transparent 60%);background:var(--c1),var(--c1),var(--c1),var(--c1),var(--c2),var(--c2),var(--c2),var(--c2);background-size:calc(var(--r)/3) calc(var(--r)/3);background-position:calc(50% - var(--r)) calc(50% - var(--r)),calc(50% + var(--r)) calc(50% - var(--r)),calc(50% - var(--r)) calc(50% + var(--r)),calc(50% + var(--r)) calc(50% + var(--r)),calc(50% + 0px) calc(50% + var(--r)*1.414),calc(50% + var(--r)*1.414) calc(50% + 0px),calc(50% - var(--r)*1.414) calc(50% + 0px),calc(50% + 0px) calc(50% - var(--r)*1.414);background-repeat:no-repeat;animation:explodeAfter 1s forwards}