Umschlag öffnen

939 byby.createsite

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

21 September 2024

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

27 December 2025

Animierter Liebesbriefumschlag aus HTML mit GSAP

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

Empfohlen

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

Animierter Liebesbriefumschlag aus HTML mit GSAP

HTML

CSS

JS

Empfohlen

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

Animierter Liebesbriefumschlag aus HTML mit GSAP

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS