crosshair { position: absolute; left: 50%; top: 50%; transform: translateX( -50% ) translateY( -50% ); mix-blend-mode: lighten; width: 1px; height: 1px; .element { position: absolute; } .el0 { background-color: #ff0; border-radius: 1000px; width: 6px; height: 6px; } &.dm_shotgun { opacity: 0.3; transition: opacity 0.5s linear; .el0 { background-color: transparent; border-radius: 1000px; left: -100px; top: -100px; width: 200px; height: 200px; border: 6px solid #ff00; border-left: 6px solid #ff0; border-right: 6px solid #ff0; transition: all 0.5s ease-out; } .el1 { transition: all 0.5s ease-out; background-color: #ff05; border-radius: 1000px; width: 10px; height: 10px; left: -5px; top: -5px; } &.fire { opacity: 0.9; transition: opacity 0.01s ease-out; .el0 { transition: all 0.01s ease-out; left: -150px; width: 300px; border: 6px solid #0000; border-left: 6px solid #fa0; border-right: 6px solid #fa0; opacity: 1.0; } .el1 { transition: all 0.01s ease-out; background-color: #ff0; width: 16px; height: 16px; left: -8px; top: -8px; } } } &.dm_pistol { opacity: 0.4; transition: opacity 0.2s ease-out; .el0, .el1, .el2, .el3 { background-color: #ff0; border-radius: 0; transition: all 0.5s ease-out; } .el0, .el1 { width: 10px; top: -1px; height: 3px; border-radius: 2px; } .el2, .el3 { width: 3px; left: -1px; height: 10px; border-radius: 2px; } .el0 { right: 8px; } .el1 { left: 8px; } .el2 { bottom: 5px; } .el3 { top: 5px; } &.fire { transition: all 0.01s ease-out; .el0, .el1, .el2, .el3 { transition: all 0.01s ease-in; } .el0 { right: 60px; width: 3px; } .el1 { left: 60px; width: 3px; } .el2 { bottom: 60px; height: 3px; } .el3 { top: 60px; height: 3px; } } } &.dm_smg { opacity: 0.5; transition: opacity 0.5s ease-in; .el0 { background-color: transparent; border-radius: 100px; border: 2px solid #fc0; width: 40px; height: 40px; left: -20px; top: -20px; transition: all 0.3s ease-out; } &.fire { opacity: 0.9; transition: opacity 0.01s ease-out; .el0 { transition: all 0.01s ease-in; width: 150px; height: 150px; left: -75px; top: -75px; border: 5px solid #fc0; } } } }