Webleb - UI Elements - HTML Stickman with Grappling Hook Structure

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 Stickman with Grappling Hook Structure

Recommended

HTML NES Emulator: Play Mega Man 3 Online

Website Design Using HTML & CSS

CSS Animation Container with Countdown

HTML

CSS

JS

Recommended

HTML NES Emulator: Play Mega Man 3 Online

Website Design Using HTML & CSS

CSS Animation Container with Countdown

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS