Umschlag öffnen

Im Editor öffnen Veröffentlichen Sie Ihren Code

21 September 2024

Schaltfläche „Hinzufügen“ zum Öffnen des Hinzufügens von Profildaten mit Validierung

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>

Umschlag öffnen

Schaltfläche „Hinzufügen“ zum Öffnen des Hinzufügens von Profildaten mit Validierung

HTML

CSS

JS

Schaltfläche „Hinzufügen“ zum Öffnen des Hinzufügens von Profildaten mit Validierung

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS