baúl del avión

1,546 byby.createsite

Abrir en el editor Publica tu código

Recomendado

23 August 2025

Guía de marcas de coches del mundo (en turco)

21 August 2025

Formulario de inicio de sesión y registro (HTML, CSS, JS)

29 November 2025

Arquitectura Ingeniería Tailwind CSS Sitio web

HTML

CSS

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