एनिमेटेड लॉकर

अनुशंसित

23 October 2024

वीएफएस डिजिटल डिजाइन एनिमेटेड टाइपफेस

7 March 2025

<!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>

एनिमेटेड लॉकर

अनुशंसित

वीएफएस डिजिटल डिजाइन एनिमेटेड टाइपफेस

एनिमेटेड लॉगिन फॉर्म

एनिमेटेड HTML इनपुट

HTML

CSS

JS

अनुशंसित

वीएफएस डिजिटल डिजाइन एनिमेटेड टाइपफेस

एनिमेटेड लॉगिन फॉर्म

एनिमेटेड HTML इनपुट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS