casier animé

Ouvrir dans l'éditeur Publiez votre code

Recommandé

9 September 2024

Formulaire de connexion HTML animé

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>

casier animé

Recommandé

Bouton de suppression animé

Page de chargement animée

Formulaire de connexion HTML animé

HTML

CSS

JS

Recommandé

Bouton de suppression animé

Page de chargement animée

Formulaire de connexion HTML animé

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS