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

Multi Step Form with Progress Bar using jQuery and CSS3

Carousel with drag and wheel

CSS Animated Loading Screen HTML Example

HTML

CSS

JS

Recommended

Multi Step Form with Progress Bar using jQuery and CSS3

Carousel with drag and wheel

CSS Animated Loading Screen HTML Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS