chest open

Open In Editor Publish Your Code

<!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

Recommended

open envelop

Add button to open add profile model with form validation

HTML

CSS

JS

Recommended

open envelop

Add button to open add profile model with form validation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS