Click anywhere to see Spark Effect(fireworks) using CSS and JS

Click anywhere to see Spark Effect(fireworks) using CSS and JS

Let's Begin! Create html.

HTML

<h2>click anywhere to spark effect(fireworks)</h2>

CSS

body {
    height: calc(100vh - 16px);
    width: calc(100vw - 23px);
    background: rgb(63, 63, 63);
}

h2 {
    opacity: 0.25;
    color: white;
    text-align: center;
    width: 100%;
    display: block;
    font-size: 22px;
    font-weight: lighter;
    font-family: "Source Code Pro", Inconsolata, Menlo, monospace;
}

ul {
    position: absolute;
    width: 22px;
    height: 22px;
    list-style: none;
    margin: -6px 0 0 -32px;
}

ul li {
    padding: 0px;
    width: 0px;
    height: 0px;
    position: absolute;
    left: auto;
    right: auto;
}

ul li:first-child {
    left: 50%;
    top: -22px;
    width: 1px;
    height: 0px;
    rotate: 0deg;
    border-left: 1px solid beige;
    animation: vert .25s linear;
}

ul li:nth-child(2) {
    left: 50%;
    bottom: -22px;
    width: 1px;
    height: 0px;
    rotate: 0deg;
    border-left: 1px solid beige;
    animation: vert .25s linear;
}

ul li:nth-child(3) {
    left: -6px;
    top: 11px;
    rotate: 0deg;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

ul li:nth-child(4) {
    right: -6px;
    rotate: 0deg;
    top: 11px;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

ul li:nth-child(5) {
    left: 0px;
    top: -11px;
    rotate: 45deg;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

ul li:nth-child(6) {
    right: 0px;
    top: -11px;
    rotate: -45deg;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

ul li:nth-child(7) {
    left: 0px;
    bottom: -11px;
    rotate: -45deg;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

ul li:nth-child(8) {
    right: 0px;
    bottom: -11px;
    rotate: 45deg;
    width: 0px;
    height: 1px;
    border-bottom: 1px solid beige;
    animation: horiz .25s linear;
}

@keyframes vert {
    from {

        height: 22px;
    }

    to {

        height: 0px;
    }
}

@keyframes horiz {
    from {
        width: 22px;
    }

    to {
        width: 0px;
    }
}

and JS

document.body.addEventListener('click', function (event) {
    const ul = document.createElement('ul');
    ul.style.left = event.pageX + 'px'; ul.style.top = event.pageY + 'px';
    for (let i = 1; i <= 8; i++) { const li = document.createElement('li'); ul.appendChild(li); }
    document.body.appendChild(ul);
    setTimeout(() => { ul.remove(); }, 250);
});

That's it!.

Click anywhere to see the spark effect.

Below is the url for DEMO :
Codepen Demo