sobre abierto

Abrir en el editor Publica tu código

7 November 2024

Efecto de animación al pasar el cursor sobre el texto

23 March 2025

Resplandor al pasar el cursor sobre el botón

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>

sobre abierto

Efecto de animación al pasar el cursor sobre el texto

Resplandor al pasar el cursor sobre el botón

HTML

CSS

JS

Efecto de animación al pasar el cursor sobre el texto

Resplandor al pasar el cursor sobre el botón

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS