Um código da ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

2 March 2025

*{
            margin: 0;
            padding: 0;
        }
        body{
            background: rgb(0, 0, 0);
            width: 100vw;
            height: 100vh;
            box-sizing: border-box;
            font-family: monospace;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

}
        /* base do stick animado */
        .stickman {
        position: absolute;
        top: 290px;
        scale: 0.35;
        left: 24%;
        }
        /* cabeca do stick animado */
        .head {
        position: absolute;
        z-index: 25;
        top: 0;
        right: auto;
        bottom: auto;
        left: auto;
        height: 50px;
        width: 50px;
        background: #ffffff;
        border-radius: 50px;
        }
        /* coluna do stick animado */
        .torso {
        position: absolute;
        z-index: 0;
        top: 45px;
        right: auto;
        bottom: auto;
        left: 20px;
        height: 95px;
        width: 5px;
        background: #ffffff;
        border-radius: 5px;
        }
        /* braco esquerdo do stick animado */
        .left-arm {
        position: absolute;
        z-index: -10;
        top: -10px;
        right: -42px;
        bottom: auto;
        left: auto;
        height: 90px;
        width: 5px;
        background: #ffffff;
        border-radius: 5px;
        transform: rotate(275deg);
        }
        /* braco direito do stick animado */
        .right-arm {
        position: absolute;
        z-index: 20;
        top: -15px;
        right: auto;
        bottom: auto;
        left: 42px;
        height: 90px;
        width: 5px;
        background: #ffffff;
        border-radius: 5px;
        transform: rotate(275deg);
        }
        /* pe do stick animado */
        .foot {
        position: absolute;
        z-index: 0;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        height: 5px;
        width: 30px;
        border-top-right-radius: 15px;
        background:rgb(255, 255, 255);
        }
        /* perna esquerda do stick animado */
        .left-leg {
        position: absolute;
        z-index: -10;
        top: 85px;
        right: auto;
        bottom: auto;
        left: 30px;
        height: 125px;
        width: 5px;
        background: #ffffff;
        border-radius: 5px;
        transform: rotate(-30deg);
        animation: walk-left-leg 2s infinite;
        }
        /* perna direita do stick animado */
        .right-leg {
        position: absolute;
        z-index: 0;
        top: 85px;
        right: 30px;
        bottom: auto;
        left: auto;
        height: 125px;
        width: 5px;
        background: #ffffff;
        border-radius: 5px;
        transform: rotate(30deg);
        animation: walk-right-leg 2s infinite;
        }
        .cart {
            position: absolute;
            right: 70%;
            top: 30%;
            width: clamp(50px, 8vw, 80px);
            height: clamp(60px, 10vw, 95px);
            background: #666;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 15;
        }

/* Ícone do carrinho simplificado */
        .cart-icon {
            width: 70%;
            height: 70%;
            border: 2px solid white;
            border-radius: 4px;
            position: relative;
        }

.cart-icon::before {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 10%;
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
        }

.cart-icon::after {
            content: '';
            position: absolute;
            bottom: -8px;
            right: 10%;
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
        }

/* Produto dentro do carrinho */
        .cart::before {
            content: '';
            position: absolute;
            top: 30%;
            rotate: 5deg;
            border-radius: 1px;
            right: 25%;
            width: clamp(15px, 2.5vw, 25px);
            height: clamp(15px, 2.5vw, 25px);
            background: white;
            z-index: 10;
        }

/* Produto dentro do carrinho */
        .cart::after {
            content: '';
            position: absolute;
            top: 29%;
            left: 25%;
            border-radius: 1px;
            rotate: 50deg;
            width: clamp(15px, 2.5vw, 25px);
            height: clamp(15px, 2.5vw, 25px);
            background: white;
            z-index: 10;
        }

/* base da prateleira */
        .shelf{
            position: absolute;
            left: 16%;
            width: 499px;
            top: 0;
            height: 100vh;
            z-index: 2;

}
        /*piso 1 da prateleira */
        .floor1{
            position: absolute;
            left: 0;
            width: 499px;
            top: 250px;
            height: 3px;
            background: rgb(255, 255, 255);

}
        /*piso 2 da prateleira */
        .floor2{
            position: absolute;
            left: 0;
            width: 499px;
            top: 270px;
            height: 3px;
            background: rgb(255, 255, 255);

}
        /*produto animado da prateleira  */
        .shelf::before{
            content: '';
            position: absolute;
            top: 230px;
            border-radius: 1px;
            left: -30px;
            width: 20px;
            height: 20px;
            background: white;
            animation: 6s passItem linear infinite;
        }
        /*produto animado da prateleira (que cai sincronizado com a animação e o carrinho)  */
        .shelf::after{
            content: '';
            position: absolute;
            top: 250px;
            border-radius: 1px;
            left: 230px;
            width: 20px;
            height: 20px;
            background: white;
            animation: 6s passItem linear infinite;
        }
       /*animação que passa o produto e cai os dois mas o video mostra so 1 */
        @keyframes passItem{
            0%{
                transform: translateX(360px) translateY(0);
            }
            80%{
                transform: translateY(0)translateX(0);
            }
            90%{
                transform: translateY(15px) rotate(-85deg) translateX(-32px);
                visibility: hidden;
            }
            100%{
                visibility: hidden;

}
        }
        /*animacao da perna esquerda */
        @keyframes walk-left-leg {
        0% {
            transform: rotate(-30deg);
            left: 30px;
        }
        50% {
            transform: rotate(30deg);
            left: -30px;
        }
        100% {
            transform: rotate(-30deg);
            left: 30px;
        }
        }
        /*animacao da perna direita*/
        @keyframes walk-right-leg {
        0% {
            transform: rotate(30deg);
            right: 30px;
        }
        50% {
            transform: rotate(-30deg);
            right: -30px;
        }
        100% {
            transform: rotate(30deg);
            right: 30px;
        }
    }
    /* Media Queries para Responsividade */

/* Telas grandes (1441px - 1920px) */
@media screen and (min-width: 1441px) and (max-width: 1920px) {
    .stickman {
        left: 27%;
        scale: 0.38;
    }
    
    .cart {
        right: 65%;
    }
    
    .shelf::after {
        left: 250px;
    }
}

/* Telas médias-grandes (1201px - 1440px) */
@media screen and (min-width: 1201px) and (max-width: 1440px) {
    .stickman {
        left: 28%;
        scale: 0.33;
    }
    
    .cart {
        right: 63%;
    }
    
    .shelf::after {
        left: 220px;
    }
}

/* Telas médias (993px - 1200px) */
@media screen and (min-width: 993px) and (max-width: 1200px) {
    .stickman {
        left: 28%;
        scale: 0.3;
    }
    
    .cart {
        right: 62%;
    }
    
    .shelf {
        width: 420px;
        left: 15%;
    }
    
    .floor1, .floor2 {
        width: 420px;
    }
    
    .shelf::after {
        left: 200px;
    }
}

/* Tablets landscape (769px - 992px) */
@media screen and (min-width: 769px) and (max-width: 992px) {
    .stickman {
        left: 26%;
        scale: 0.27;
        top: 310px;
    }
    
    .cart {
        right: 62%;
        top: 31%;
    }
    
    .shelf {
        width: 350px;
        left: 13%;
    }
    
    .floor1, .floor2 {
        width: 350px;
    }
    
    .floor1 {
        top: 270px;
    }
    
    .floor2 {
        top: 290px;
    }
    
    .shelf::before {
        top: 250px;
    }
    
    .shelf::after {
        top: 270px;
        left: 170px;
    }
}

/* Tablets portrait (577px - 768px) */
@media screen and (min-width: 577px) and (max-width: 768px) {
    .stickman {
        left: 26%;
        scale: 0.24;
        top: 330px;
    }
    
    .cart {
        right: 61%;
        top: 34%;
    }
    
    .shelf {
        width: 300px;
        left: 11%;
    }
    
    .floor1, .floor2 {
        width: 300px;
    }
    
    .floor1 {
        top: 290px;
    }
    
    .floor2 {
        top: 310px;
    }
    
    .shelf::before {
        top: 270px;
    }
    
    .shelf::after {
        top: 290px;
        left: 145px;
    }
}

/* Smartphones landscape (481px - 576px) */
@media screen and (min-width: 481px) and (max-width: 576px) {
    .stickman {
        left: 23%;
        scale: 0.21;
        top: 350px;
    }
    
    .cart {
        right: 63%;
        top: 36%;
    }
    
    .shelf {
        width: 250px;
        left: 9%;
    }
    
    .floor1, .floor2 {
        width: 250px;
    }
    
    .floor1 {
        top: 310px;
    }
    
    .floor2 {
        top: 330px;
    }
    
    .shelf::before {
        top: 290px;
    }
    
    .shelf::after {
        top: 310px;
        left: 120px;
    }
}

/* Smartphones portrait (361px - 480px) */
@media screen and (min-width: 280px) and (max-width: 480px) {
    .stickman {
        left: 22%;
        scale: 0.19;
        top: 370px;
    }
    
    .cart {
        right: 58%;
        top: 38%;
    }
    
    .shelf {
        width: 220px;
        left: 7%;
    }
    
    .floor1, .floor2 {
        width: 220px;
    }
    
    .floor1 {
        top: 330px;
    }
    
    .floor2 {
        top: 350px;
    }
    
    .shelf::before {
        top: 310px;
    }
    
    .shelf::after {
        top: 330px;
        left: 105px;
    }
}

Um código da ByBy.inc

Recomendado

Um Código por junca

jogo da cobra

Um código por lebdev

HTML

CSS

JS

Recomendado

Um Código por junca

jogo da cobra

Um código por lebdev

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS