sobre abierto

788 byby.createsite

Abrir en el editor Publica tu código

Recomendado

11 May 2024

Información sobre herramientas de Instagram

10 February 2024

Animación al Pasar el Ratón sobre un Botón

5 August 2024

Bloqueos de contenido dinámico V2: accesorios abiertos

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

Recomendado

Información sobre herramientas de Instagram

Animación al Pasar el Ratón sobre un Botón

Bloqueos de contenido dinámico V2: accesorios abiertos

HTML

CSS

JS

Recomendado

Información sobre herramientas de Instagram

Animación al Pasar el Ratón sobre un Botón

Bloqueos de contenido dinámico V2: accesorios abiertos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS