Webleb - UI Elements - open envelop

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>abrir envelope</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box; 
    }
     /* body centraliza tudo, cor preta e tela inteira */
    body {
        width: 100vw;
        height: 100vh;
        background: rgb(0, 0, 0); 
        justify-content: center;
        align-items: center;
        display: flex;
    }
    /* base do envelope, centralizada na tela */
    .base {
        width: 300px;
        height: 210px;
        background: #f5f5dc; 
        border-radius: 5px;
        position: relative;
        border: 1px solid #d3d3d3; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    }
    /* primeira dobra, usamos o clip-path com uma div para cortar o formato do envelope e o z-index para ajustar a posição z na tela */
    .dobra1 {
        background: rgba(200, 200, 200, 0.8); 
        position: relative;
        top: -60px;
        left: 0;
        width: 300px;
        height: 130px;
        clip-path: polygon(50% 0%, 2% 90%, 0% 100%, 100% 100%, 98% 90%);
        z-index: 2;
        border: 1px solid #c0c0c0; 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); 
    }
    /* quando passar o mouse sobre a base, faça a animação para a dobra 2 em 0.01s para parecer que nao se movimentou no eixo Y */
    .base:hover .dobra2 {
        animation: open-envelope 0.01s linear forwards;
    }
    /* em paralelo a  dobra2, faça a animação para a carta dentro, mude a posição z, deixe visivel e espere um pouco parado depois va para cima*/
    .base:hover .conteudo-dentro {
        visibility: visible;
        z-index: 4;
        animation: check-message 2s linear forwards;
    }
    /* animação check-message */
    @keyframes check-message {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(0);
        }
        90% {
            transform: translateY(-50px);
        }
        100% {
            transform: translateY(-60px);
        }
    }
    /* animação open-envelope */
    @keyframes open-envelope {
        0% {
            transform: rotateX(180deg) translateY(0);
        }
        100% {
            transform: rotateX(0) translateY(-120px);
        }
    }
    /* dobra 2 com z-index abaixo da dobra1 */
    .dobra2 {
        background: #e0d8c3; 
        position: relative;
        left: 0;
        width: 300px;
        bottom: 270px;
        height: 130px;
        transform: rotate(180deg);
        clip-path: polygon(50% 0%, 2% 90%, 0% 100%, 100% 100%, 98% 90%);
        z-index: 3;
        border: 1px solid #b0a68c; 
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); 
    }

/* carta dentro */
    .conteudo-dentro {
        background: #fff8e1; 
        border-radius: 10px;
        text-align: center;
        justify-self: center;
        justify-items: center;
        padding-top: 30px;
        margin-top: 10px;
        top: 0;
        position: relative;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        left: 0;
        width: 270px;
        height: 130px;
        visibility: hidden;
        z-index: 1;
        border: 1px solid #d4c8a6; 
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); 
    }
</style>
<body>

<div class="base">
        <div class="conteudo-dentro">ABRIR ENVELOPE</div>
        <div class="dobra1"></div>
        <div class="dobra2"></div>
    </div>
</body>
</html>

CSS

JS

open envelop

Recommended