armário animado

Abrir no Editor Publique Seu Código

Recomendado

1 June 2025

Controle deslizante de cartão animado expansível

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desbloquear cadeado</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #1a1a1a;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100vw;
            height: 100vh;
        }
        /* base para o cadeado */
        .desbloquear-cadeado{
            background: linear-gradient(145deg, #e6e6e6, #ffffff);
            width: 120px;
            height: 120px;
            border-top-right-radius: 30px;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            box-shadow: 
                5px 5px 10px rgba(0, 0, 0, 0.3),
                -2px -2px 8px rgba(255, 255, 255, 0.1),
                inset 3px 3px 5px rgba(0, 0, 0, 0.1),
                inset -3px -3px 5px rgba(255, 255, 255, 0.2);
            position: relative;
        }
        /* detalhe de aparencia*/
        .desbloquear-cadeado::after {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            border-radius: 15px;
            background: linear-gradient(145deg, #d1d1d1, #f0f0f0);
            z-index: 1;
        }
        /* detalhe do lado direito do cadeado para mostrar apenas o esquerdo na hora de levantar o ferro*/
        .desbloquear-cadeado-detail{
            width:14px;
            height: 20px;
            background: transparent;
            background: linear-gradient(135deg, #e6e6e6, #8a8a8a);
            clip-path: polygon(
                0% 100%,
                0% 0%,
                100% 0%,
                100% 100%
            );
            z-index: 19;
            bottom: 59%;
            left: 54.8%;
            border-radius: 30%;
            scale: 0.7;
            position: absolute;
            transition: all 0.3s ease;
            transform-origin: right center;
            box-shadow: 
                5px 5px 15px rgba(0, 0, 0, 0.4),
                -2px -2px 8px rgba(255, 255, 255, 0.1);
        }
        /* o ferro que irá girar na animação, clip-path para cortar metade do quadrado com bordas arredondadas */
        .desbloquear-cadeado-locker{
            width: 120px;
            height: 150px;
            background: transparent;
            box-sizing: border-box;
            border: solid #d1d1d1 15px;
            border-top-color: #f5f5f5;
            border-left-color: #e0e0e0;
            border-right-color: #b0b0b0;
            border-bottom-color: #8a8a8a;
            clip-path: polygon(
                0% 70%,    
                0% 0%,    
                100% 0%,   
                100% 70%   
            );
            z-index: 20;
            bottom: 50%;
            left: 35.5%;
            border-radius: 30%;
            scale: 0.7;
            position: absolute;
            transition: all 0.3s ease;
            transform-origin: right center; 
            box-shadow: 
                5px 5px 15px rgba(0, 0, 0, 0.4),
                -2px -2px 8px rgba(255, 255, 255, 0.1);
        }
        /* buraco para inserir a chave*/
        .desbloquear-cadeado-hole {
            position: absolute;
            left: 50%;
            top: 50%;
            background: #333;
            width: 1px;
            height: 1px;
            z-index: 20;
            scale: 20;
            border-radius: 50%;
            transition: all 0.3s ease;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
        }
        /* animação ao passar o mouse sobre o buraco acionar o ferro */
        .desbloquear-cadeado-hole:hover ~ .desbloquear-cadeado-locker {
            animation: desbloquear 3s ease forwards;
        }
        /* detalhe para ir em paralelo com o ferro */
        .desbloquear-cadeado-hole:hover ~ .desbloquear-cadeado-detail{
            animation: desbloquear-detail 3s ease forwards;
        }
        /* animação do detalhe, não vai para cima eixo  Y */
        @keyframes desbloquear-detail{
            0%{
                transform: translateY(0) translateX(0) rotateY(0deg);
            }
            30%{
                transform: translateY(0) translateX(0) rotateY(0);
            }

100%{
                transform: translateY(0) translateX(0) rotateY(-180deg);
            }
        }
        /* animacao para o ferro para rotacionar e ir para cima para mostrar a parte cortada */
        @keyframes desbloquear{
            0%{
                transform: translateY(-15px) translateX(0) rotateY(0deg);
            }
            30%{
                transform: translateY(-15px) translateX(0) rotateY(0);
            }
    
            100%{
                transform: translateY(-15px) translateX(0) rotateY(-180deg);
            }
        }
        /* animcacao do buraco */
        .desbloquear-cadeado-hole:hover{
            scale: 30;
            background: #555;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
        }
    </style>
</head>
<body>
    
    <div class="desbloquear-cadeado-hole"></div>
    <div class="desbloquear-cadeado-locker"></div>
    <div class="desbloquear-cadeado-detail"></div>
    <div class="desbloquear-cadeado"></div>
</body>
</html>

armário animado

Recomendado

Diagrama de Venn animado

Formulário de login animado

Controle deslizante de cartão animado expansível

HTML

CSS

JS

Recomendado

Diagrama de Venn animado

Formulário de login animado

Controle deslizante de cartão animado expansível

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS