ग्रैपलिंग हुक संरचना वाला HTML स्टिकमैन

78 ByBy.inc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

29 June 2025

तुर्की ब्लॉग और पॉडकास्ट HTML टेम्पलेट

18 October 2024

HTML CSS पोर्टफोलियो वेबसाइट टेम्पलेट

30 August 2024

एनिमेटेड ड्रैकुला होवर प्रभाव वाला बटन

HTML

CSS

/* Reset básico */
*{
    margin:0;
    padding:0;
}

/* Fundo com gradiente noturno */
body,.bg{
    overflow:hidden;
    background: linear-gradient(
    to bottom,
    #000000 0%,      /* Preto no topo */
    #0a0a0a 20%,     /* Preto suave */
    #1a1a2e 40%,     /* Azul muito escuro */
    #2c2c54 60%,     /* Azul escuro */
    #404080 80%,     /* Azul médio */
    #5c5caa 100%     /* Azul mais claro no horizonte */
);
    width:100vw;
    height:100vh;
    display:flex;
}

/* Montanha principal */
.mountain{
    position: absolute;
    bottom: 0;
    left:52%;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 180px solid #7ac1e4;
    z-index: 1;
}

/* Pico da montanha */
.mountain-top {
    position: absolute;
    right: -65px;
    border-left: 65px solid transparent;
    border-right: 65px solid transparent;
    border-bottom: 77px solid #ceeaf6;
    z-index: 2;
}

/* Neve no topo da montanha */
.mountain-cap-1, .mountain-cap-2, .mountain-cap-3 {
    position: absolute;
    top: 70px;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #ceeaf6;
}
.mountain-cap-1 { left: -55px; }
.mountain-cap-2 { left: -25px; }
.mountain-cap-3 { left: 5px; }

/* Container do boneco - move até a montanha */
.stickman-container{
    position:absolute;
    left:25%;
    bottom:0%;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    animation: pushStick 2s linear forwards;
    animation-delay:6s;
}

/* Animação do boneco voando até a montanha */
@keyframes pushStick{
    0%{
        transform: translate(0,0);
    }
    100%{
        transform:translate(420px,-180px);
    }
}

/* Cabeça do stickman */
.head{
    width:15px;
    height:15px;
    border: solid 2px black;
    border-radius:50%;
}

/* Corpo do stickman */
.body{
    width:2px;
    height:30px;
    background:black;
}

/* Braço esquerdo fixo */
.left-arm{
  position:absolute;
  width:2px;
  height:20px;
  background:black;
  rotate:45deg;
  transform:translate(-5px,5px);
}

/* Container do braço direito - gira para lançar gancho */
.right-arm-container{
    transform:translate(8px,-23px);
    transform-origin: center;
    animation: launchHook 4s linear forwards;
}

/* Animação do braço direito girando */
@keyframes launchHook{
    0%{
        transform: translate(8px,-23px) rotateZ(0deg);
    }
    50%{
        transform: translate(8px,-36px) rotateZ(-90deg);
    }
    100%{
        transform: translate(8px,-33px) rotateZ(-63deg);
    }
}

/* Gancho com animação de lançamento */
.right-arm-container .grappling-hook{
    animation: launchHookSon 8s linear forwards;
}

/* Animação do gancho voando e se prendendo */
@keyframes launchHookSon{
    0%{
        transform: translateY(0) rotateZ(0);
    }
    25%{
         transform: translateY(0) rotateZ(-90deg);
    }
    50%,75%{
         transform:  translateY(600px) rotateZ(-90deg) ;
    }
    100%{
        transform:  translateX(-56px) translateY(-56px) rotateZ(-90deg);
    }
}

/* Braço direito */
.right-arm{
  width:2px;
  height:20px;
  background:black;
  rotate:-45deg;
}

/* Perna esquerda */
.left-leg{
  position:absolute;
  width:2px;
  height:30px;
  background:black;
  rotate:30deg;
  transform:translate(6px,23px);
}

/* Perna direita */
.right-leg{
  position:absolute;
  width:2px;
  height:30px;
  background:black;
  rotate:-30deg;
  transform:translate(-6px,23px);
}

/* Base do gancho */
.grappling-hook {
    scale:0.7;
    position:absolute;
    top:5px;
    width: 35px;
    rotate:-45deg;
    height: 35px;
    display: inline-block;
}

/* Centro do gancho */
.grappling-hook::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: black;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Corda do gancho - cresce e depois some */
.rope{
    transform-origin: top;
    position:fixed;
    width:1px;
    height:1px;
    background:snow;
    transform:rotateZ(-45deg) translateX(8px);
    animation: 
    ropeWidth 2s linear forwards,
    ropeNormal 2s linear forwards;
    animation-delay: 2s, 6s;
}

/* Animação da corda crescendo */
@keyframes ropeWidth{
    0%{
        height:0;
    }
    100%{
        height:430px;
    }
}

/* Animação da corda encolhendo */
@keyframes ropeNormal{
    0%{
        transform: translateX(9px) rotateZ(315deg);
        height:430px;
    }
    100%{
        transform: translateX(9px)  rotateZ(315deg); 
        height:0;
    }
}

/* Gancho superior */
.hook1 {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border: 2px solid red;
    border-bottom: none;
    border-left: none;
    border-radius: 0 6px 0 0;
    transform-origin: bottom left;
    transform: translateX(-50%) rotate(-45deg);
}

/* Gancho direito */
.hook2 {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border: 2px solid red;
    border-top: none;
    border-left: none;
    border-radius: 0 0 6px 0;
    transform-origin: top left;
    transform: translateY(-50%) rotate(45deg);
}

/* Gancho inferior */
.hook3 {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border: 2px solid red;
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 6px;
    transform-origin: top right;
    transform: translateX(-50%) rotate(45deg);
}

/* Gancho esquerdo */
.hook4 {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border: 2px solid red;
    border-bottom: none;
    border-right: none;
    border-radius: 6px 0 0 0;
    transform-origin: bottom right;
    transform: translateY(-50%) rotate(-45deg);
}

अनुशंसित

तुर्की ब्लॉग और पॉडकास्ट HTML टेम्पलेट

HTML CSS पोर्टफोलियो वेबसाइट टेम्पलेट

एनिमेटेड ड्रैकुला होवर प्रभाव वाला बटन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS