Webleb - Extraits de Code - Mouvement de balle

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

Mouvement de balle - CSS

Recommandé

Un code de Mete

Chargeur de jeu Unity WebGL Slope Plus

Un code par webleb

HTML

CSS

JS

Recommandé

Un code de Mete

Chargeur de jeu Unity WebGL Slope Plus

Un code par webleb

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS