Webleb - UI Elements - Ball move

HTML

CSS

body {
    padding: 0;
    margin: 0;
    height: 100vh;
    overflow-x: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #1E1F26, #2C3E50);
}
@property --d {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@property --x {
    syntax: "<length>";
    inherits: false;
    initial-value: 25px;
}
@property --y {
    syntax: "<length>";
    inherits: false;
    initial-value: 25px;
}
@property --x-offset {
    syntax: "<length>";
    inherits: false;
    initial-value: 70px;
}
@property --y-offset {
    syntax: "<length>";
    inherits: false;
    initial-value: 100px;
}
.wrapper-scene {
    width: 434px;
    height: 496px;
    background: linear-gradient(135deg, #1E1F26, #2C3E50);
    display: flex;
    align-items: end;
    overflow: hidden;
}
.scene {
    position: relative;
    width: 300px;
    height: 240px;
    
    border-left: .1rem solid #F1C40F;
    border-bottom: .8rem solid #F1C40F;
    .grid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        filter: drop-shadow(5px -5px 0px black);
    }
}
.ball {
    position: absolute;
    top: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--d));
    transform-origin: var(--x-offset) var(--y-offset);
    width: 50px;
    aspect-ratio: 1;
    background: radial-gradient(circle, #FF5733, #C70039);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); 
    border-radius: 50%;
    animation: parabola 1.5s ease-in infinite, shadowBounce 1.5s infinite ease-in-out;
}
.square {
    --bounce: linear( 
        0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
        0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1, 72.7%,
        0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
        0.988, 0.984, 0.988, 1
    );
    --path1: path('M 0 0 C 33.6667 0 67.3333 0 101 0 L 101 101 L 0 101 L 0 0');
    --path2: path('M 0 0 C 34 18 65 17 101 0 L 101 101 L 0 101 L 0 0');
    --path3: path('M 0 0 C 36 -14 64 -14 101 0 L 101 101 L 0 101 L 0 0');
    position: relative;
    width: 100px;
    height: 80px;
    grid-row: var(--r);
    grid-column: var(--c);
    background: #F1C40F;
    &.bounce {
        background: #F1C40F;
        clip-path: var(--path1);
        animation: move 1.5s infinite;
        animation-delay: calc(var(--i) * 0.51s);
        animation-timing-function: var(--bounce);
        &:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: #F1C40F;;
            inset: 0;
            transform: scale(1.3);
        }
    }
}
@keyframes move {
    1%,45% {
        clip-path: var(--path1);
    }
    14% {
        clip-path: var(--path2);
    }
    26% {
        clip-path: var(--path3);
    }
}
@keyframes shadowBounce {
    0%, 100% {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    }
    50% {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
    }
}
@keyframes parabola {
    40%, 100% {
        transform-origin: 70px 100px;
    }
    0% {
        --y: -265px;
    }
    7% {
        --x: 30px;
        --y: -42px;
    }
    20% { 
        --y: -245px;
    }
    40%, 40.01% {
        --d: 120deg;
        --x: 0px;
        --y: -44px;  
    }
    40.01% {
        --x: 133px;
        --y: 29px;
    }
    60%, 60.01% {
        --d: 140deg;
        --x: 100px;
        --y: 20px;
    }
    60.01% {
        --x: 235.5px;
        --y: 110px;
    }
    80%, 100% {
        --d: 180deg;
        --x: 236.5px;
        --y: 120px;
    }
    0%, 20% {
        --x: 25px;
    }
    0%, 7%, 20%, 40.01%, 60.01% {
        --d: 0deg;
    }
}

JS

Ball move - css

Recommended