baúl del avión

Abrir en el editor Publica tu código

Recomendado

1 August 2025

Plantilla de sitio web de portafolio moderno

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

baúl del avión

Recomendado

Pestaña sobrecargada

Un código de Metehan

Plantilla de sitio web de portafolio moderno

HTML

CSS

JS

Recomendado

Pestaña sobrecargada

Un código de Metehan

Plantilla de sitio web de portafolio moderno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS