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;
    }
}

Ball move - css

Recommended

Football Players Exhibition Gallery

lecteur mp3 en html css et js

CSS Card Glow Effect

HTML

CSS

JS

Recommended

Football Players Exhibition Gallery

lecteur mp3 en html css et js

CSS Card Glow Effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS