chest open

Open In Editor Video Publish Your Code

28 May 2025

Scroll opening

21 September 2024

Add button to open add profile model with form validation

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Baú abrindo</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
            z-index: -1;
        }
        /* base lateral usando o clip path para dar efeito de 3d*/
        .base-lateral{
            background: #5C4033; 
            position: absolute;
            left: 40%;
            top: 40%;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
            width: 50px;
            height: 100px;
            z-index: 1;
        }
        /* base frontal usando o clip path para dar efeito de 3d*/
        .base-frontal{
            z-index: 1;
            background: #5C4033; 
            position: absolute;
            left: 49.25%;
            top: 40%;
            width: 100px;
            height: 100px;
            clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
        }
         /* tampa frontal usando o clip path para dar efeito de 3d*/
        .tampa-frontal{
            z-index: 1;
            background: #4A3728; 
            position: absolute;
            clip-path: circle(50% at 50% 100%);
            transform: rotateZ(80%);
            left: 40%;
            top: calc(40% - 55px);
            width: 50px;
            height: 50px;
        }
        /* tampa lateral usando o clip path para dar efeito de 3d*/
        .tampa-lateral{
            background: #4A3728; 
            position: absolute;
            left:  calc(49.25% - 30px);
            top: calc(40% - 30px);
            z-index: -1;
            border-top-right-radius: 50%;
            width: 130px;
            height: 25px;
        }
        /* retangulo interno maior que o baú para mostrar ao clicar*/
        .internal{
            background: #2E1E1A; 
            position: absolute;
            visibility: hidden;
            z-index: -2;
            transform: rotateZ(80deg);
            left:  26%;
            top: 24%;
            width: 180px;
            height: 120px;
        }
        /* retangulo muito grande e fora do baú para cobrir  o interno e da mesma cor do body para parecer
        transparente*/
        .external{
            background: rgb(0,0,0);
            width: 165px;
            height: 165px;
            position: absolute;
            left: 10%;
            top: 20%;
            z-index: -1;

}
        /* retangulo muito grande e fora do baú para cobrir  o interno e da mesma cor do body para parecer
        transparente*/
        .external2{
            content: '';
            background: rgb(0,0,0);
            width: 140px;
            height: 140px;
            position: absolute;
            left: 33%;
            top:11%;
            z-index: -1;
            transform: rotateZ(-10deg);
        }
         /* animacao para abrir a tampa parte redonda*/
        @keyframes abrirBau {
            0%{
                transform: rotateZ(0) translate(0,0);
            }
            100%{
                transform: rotateZ(-8deg) translate(-4px,1px);
            }
        }
        /* animacao para abrir a tampa parte quadrada*/
        @keyframes abrirLateral{
            0%{
                transform: rotateZ(0) translate(0,0);
            }
            100%{
                transform: rotateZ(-8deg) translate(-1.5px,-6.7px);
            }
        }
        /* animacao para mostrar o interno*/
        @keyframes abrirInterno{
            0%{
                transform: rotateZ(40deg);
            }
            10%{
                visibility: visible;
            }
            100%{
                visibility: visible;
                transform: rotateZ(40deg);
            }
        }
    </style>
</head>
<body>  
    
    <div class="external"></div>
    <div class="external2"></div>
    <div class="internal"></div>
    <div class="tampa-frontal"></div>
    <div class="tampa-lateral"></div>
    <div class="base-frontal"></div>
    <div class="base-lateral"></div>

chest open

Scroll opening

Add button to open add profile model with form validation

HTML

CSS

JS

Scroll opening

Add button to open add profile model with form validation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS