Un código de ByBy.inc

Abrir en el editor Video Publica tu código

Recomendado

5 November 2024

Barra de navegación desplazable

4 December 2024

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

Un código de ByBy.inc

Recomendado

Barra de navegación desplazable

Concepto de reloj React

Arena del rey del coche

HTML

CSS

JS

Recomendado

Barra de navegación desplazable

Concepto de reloj React

Arena del rey del coche

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS