Webleb - Snippet di Codice - Movimento della palla

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

Movimento della palla - css

Consigliato

Esempio di animazione della griglia CSS

Frammento HTML di animazione cerebrale CSS

Pulsante sfumatura CSS

HTML

CSS

JS

Consigliato

Esempio di animazione della griglia CSS

Frammento HTML di animazione cerebrale CSS

Pulsante sfumatura CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS