baule dell'aereo

1154 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

18 September 2024

Accesso hacker

19 February 2026

Modulo di accesso olografico 3D HTML

21 December 2024

*
        {
            margin: 0;
            padding: 0;
        }
        body{
            background: rgb(0, 0, 0);
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: monospace;
        }
        /*elipse 1 da tampa e container com cor de fundo igual ao background */
        .container::before,.tampa::before{
            content: '';
            background: rgb(0, 0, 0);
            width: 250px;
            position: absolute;
            left: -160px;
            top: -32px;
            height: 130px;
            clip-path: ellipse(25% 40% at 50% 50%);
        }
        /*elipse 2 da tampa e container com cor de fundo igual ao background*/
        .container::after,.tampa::after{
            content: '';
            position: absolute;
            left: 160px;
            top: -32px;
            background: rgb(0, 0, 0);
            width: 250px;
            height: 130px;
            clip-path: ellipse(25% 40% at 50% 50%);
        }

/* container e tampa (retangulos)*/
        .container,.tampa{
            position: absolute;
            background: rgba(255, 255, 255);
            width: 250px;
            height: 65px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

}
        /* tampa na frente com z-index */
        .tampa{
            z-index: 2;
        }
        /* animacao ao passar mouse na tampa */
        .tampa:hover{
            animation:  abrirTampa 1.5s linear forwards;
            transform-origin: top;
        }
        /* animacao rotate para abrir */
        @keyframes abrirTampa{
            0%{
                transform: rotateX(0);
            }
            100%{
                   transform: rotateX(-135deg);
            }
        }

baule dell'aereo

Consigliato

Accesso hacker

Modulo di accesso olografico 3D HTML

pubblicità

HTML

CSS

JS

Consigliato

Accesso hacker

Modulo di accesso olografico 3D HTML

pubblicità

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS