JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="firingscope">
    <div class="bullet bulletleft"></div>
    <div class="bullet bulletright"></div>
</div>
<div class="firingcrosshairs"></div>
<div class="explosion"></div>
<button onmousedown="$('.bulletleft').addClass('firingleft');$('.bulletright').addClass('firingright');$('.explosion').addClass('exploding');" onmouseup="$('.bulletleft').removeClass('firingleft');$('.bulletright').removeClass('firingright');$('.explosion').removeClass('exploding');">FIRE</button>

CSS

body{
    overflow:hidden;
    height:100%;
    padding:0px;
    margin:0px;
}

.firingleft{
    -webkit-animation: fireleft 300ms infinite;
    display:block !important;
}
@-webkit-keyframes fireleft{
    from {
	   -webkit-transform: translate3d(0px,200px,0px);
	   -webkit-filter: blur(0px);
        opacity:1;
	   }
       to {
           -webkit-transform: translate3d(300px,-200px,-1000px);
           -webkit-filter: blur(10px);
        opacity:0;
       }
}
.firingright{
    -webkit-animation: fireright 300ms infinite;
     display:block !important;
}
@-webkit-keyframes fireright{
    from {
	   -webkit-transform: translate3d(300px,300px,0px);
	   -webkit-filter: blur(0px);
        opacity:1;
	   }
       to {
           -webkit-transform: translate3d(-200px,-200px,-1000px);
           -webkit-filter: blur(10px);
        opacity:0;
       }
}
.firingcrosshairs{
    position:fixed;
    top:50%;
    left:50%;
    width:20px;
    height:20px;
    margin-left:-10px;
    margin-top:-10px;
    border:solid 1px #000;
}
.firingscope{
    -webkit-perspective:1000px;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    height:300px;
}
.bullet{
    width:200px;
    height:150px;
    background-position:top left;
    background-repeat:no-repeat;
}
.bulletleft{
    position:absolute;
    left:0px;
    top:0px;
    display:none;
    background-image:...