Разводы на воде от капли на CSS

Разводы на воде от капли на CSS

SCSS

css свойства капли и анимации развода как на воде

$base: #DADCE8;
$ease: cubic-bezier(0.165, 0.84, 0.44, 1);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
  font-size: 18px;
}

body {
  width: 100%;
  min-height: 100%;
  display: flex;
    // justify-content: center;
    // align-items: center;
    background: $base;
    overflow: hidden;
}

.drop {
    position: relative;
    position: absolute;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    width: 50vmin;
    height: 50vmin;
    border-radius: 50%;
    // background: #000;
    filter: blur(1vmin);
    box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
                            5vmin 5vmin 5vmin darken($base, 10%),
                            inset -5vmin -5vmin 5vmin lighten($base, 5%),
                            inset 5vmin 5vmin 5vmin darken($base, 10%);
    border: 0 solid $base;
    animation: expand 4s $ease infinite;
    
    @keyframes expand {
        0% {
            width: 0;
            height: 0;
            box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
                            5vmin 5vmin 5vmin darken($base, 10%),
                            inset -5vmin -5vmin 5vmin lighten($base, 5%),
                            inset 5vmin 5vmin 5vmin darken($base, 10%);
            border: 0 solid transparentize($base, .5);
        }
        5% {
            box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
                            5vmin 5vmin 5vmin darken($base, 10%),
                            inset -5vmin -5vmin 5vmin lighten($base, 5%),
                            inset 5vmin 5vmin 5vmin darken($base, 10%);
            border: 2vmin solid transparentize($base, .5);
        }
        90% {
            box-shadow: none;
            border: 2vmin solid transparentize($base, .5);
        }
        100% {
            width: 100vmin;
            height: 100vmin;
            box-shadow: none;
            border: 0 solid transparentize($base, .5);
        }
    }
    
    &:before {
        content: '';
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0%;
        height: 0%;
        border-radius: 50%;
        animation: expand1 4s $ease infinite;
        box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
                            5vmin 5vmin 5vmin darken($base, 10%),
                            inset -5vmin -5vmin 5vmin lighten($base, 5%),
                            inset 5vmin 5vmin 5vmin darken($base, 10%);
        
        @keyframes expand1 {
            0% {
                width: 0%;
                height: 0%;
                // opacity: 1;
                box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
                            5vmin 5vmin 5vmin darken($base, 10%),
                            inset -5vmin -5vmin 5vmin lighten($base, 5%),
                            inset 5vmin 5vmin 5vmin darken($base, 10%);
                border: 0 solid $base;
            }
            20% {
                box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
                            5vmin 5vmin 5vmin darken($base, 10%),
                            inset -5vmin -5vmin 5vmin lighten($base, 5%),
                            inset 5vmin 5vmin 5vmin darken($base, 10%);
            }
            100% {
                width: 60%;
                height: 60%;
                // opacity: 0;
                box-shadow: none;
                border: 1vmin solid $base;
            }
        }
    }
}

JS

скрипт для создания капли в месте клика мышкой

// click to add more drops
console.clear();

class Drop {
    constructor(x, y) {
        console.log(x);
        this.x = x;
        this.y = y;
        this.create();
    }
    
    create() {
        let dropEl = document.createElement('div');
        dropEl.classList.add('drop');
        dropEl.style.left = `${this.x}px`;
        dropEl.style.top = `${this.y}px`;
        document.body.appendChild(dropEl);
    }
}

const createDrop = e => {
    let xPos = e.clientX,
            yPos = e.clientY;
    
    let drop = new Drop(xPos, yPos);
}

document.addEventListener('click', createDrop);
document.addEventListener('DOMContentLoaded', function() {
    new Drop(window.innerWidth/2, window.innerHeight/2);
});