*{
    padding:0;margin:0;
}


body {
    min-height: 100vh;
    background:black;
    cursor: pointer;
    overflow: hidden;
}

span {
    width:50px;
    height: 50px;
    background:linear-gradient(to right ,#4facfe 0%, #00f2fe 100%);
    display: block;
    position:absolute;
    animation: anime 1s linear;
    transition: 1s all;
    border-radius: 50%;
    transform:translate(-50%,-50%) scale(1);
    pointer-events: none;
    top:50%;
    left:50%;
}

span:before {
    content :"";
    position:absolute;
    width:90%;
    height: 90%;
    background:black;
    border-radius: 50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

}


@keyframes anime {
    0%{}
    100%{
        opacity: 0;
        transform:translate(-50%,-50%) scale(5);
        filter: hue-rotate(360deg);
    }
}