Mouvement de balle - CSS

319 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

Recommandé

1 March 2023

Formulaire de connexion CSS

29 June 2025

Modèle HTML pour blog et podcast turc

16 September 2025

Formulaire HTML de transfert de pièces avec sélection de paiement

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

Recommandé

Formulaire de connexion CSS

Modèle HTML pour blog et podcast turc

Formulaire HTML de transfert de pièces avec sélection de paiement

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS