भाषा को आगे बढाओ

अनुशंसित

26 January 2025

<body>
    
    <div class="skeleton-container">
        <div class="head">
            <div class="top">
            <br/>
            .top{
            width:50px;
            height:50px;
            }
            </div>
            <div class="bottom">
            <br/>
            .bottom{
            top:28px;
            left:12px;
            }
            </div>
        </div>
        <div class="column">
            .column{width:200px;
            height:5px;
            }</div>
        <div class="left-arm-container">
            <div class="left-shoulder">
            .left-shoulder{ width: 50px;
            height:5px;} </div>
            <div class="left-top">
                .left-top{
                    width: 50px;
                    height:5px;
                }
            </div>
            <div class="left-bottom">
                    .left-top{
                    width: 50px;
                    height:5px;
                }
            </div>
        </div>
        <div class="right-shoulder">.right-top{top:18%;}</div>
        <div class="right-top">.right-top{top:18.5%;}</div>
        <div class="right-bottom">.right-top{top:18%;}</div>

<div class="column-parts">
        <div class="column-part">nth:child(1)</div>
        <div class="column-part">nth:child(2)</div>
        <div class="column-part">nth:child(3)</div>
        <div class="column-part">nth:child(4)</div>
        <div class="column-part">nth:child(5)</div>
        <div class="column-part">nth:child(6)</div>
        <div class="column-part">nth:child(7)</div>
        <div class="column-part">nth:child(8)</div>
        <div class="column-part">nth:child(9)</div>
        <div class="column-part">nth:child(10)</div>
        </div>

<div class="left-leg-container">
            <div class="left-top">
                .left-top{width:50px;
            height:5px;}
            </div>
            <div class="left-bottom">
                .left-bottom{
                         width:40px;
            height:5px;
                }
            </div>
            <div class="left-foot">
                .left-foot{
                         width:20px;
            height:5px;
                }
            </div>
        </div>
        <div class="right-leg-container">
            <div class="right-top">.right-top{width:70px;}</div>
            <div class="right-bottom">.right-bottom{width:50px;}</div>
            <div class="right-foot">.right-foot{width:20px;}</div>
        </div>
    </div>
   
</body>

CSS

*{
            margin:0;
            padding:0;
            box-sizing:border-box;
            user-select: none;

}
        body{
            background-color: black;
            width:100vw;
            height:100vh;
            overflow: hidden;
            font-family: monospace;
            display:flex;
            flex-direction: column;
            justify-content:center;
            align-items: center;

}
        /*estilo comum osso com codigo dentro */
        .skeleton-container *{
            position:absolute;
            background:rgba(255, 255, 255);
            color:black;
            font-size:5pt;
            text-align: center;
    
        }
        /*cranio */
        .top{
            border-radius:50%;
            width:50px;
            height:50px;
        }
        /*mandibula */
        .bottom{   
            top:30px;
            left:12px;
            width:28px;
            height:32px;
            border-radius: 40%;

}
        /*juntando cranio com mandibula */
        .head{
            top:10%;
            position:absolute;
            animation: explode-head 1s ease-out 6s forwards;
        }
        /*olho esquerdo */
        .head::before{
            content: '';
            z-index:1;
            position:absolute;
            background:rgb(0, 0, 0);
            width:5px;
            height:5px;
            top:17px;
            left:12px;
            border-radius:50%;

}
        /*olho direito */
        .head::after{
            content: '';
            position:absolute;
            background:rgb(0, 0, 0);
            width:5px;
            height:5px;
            top:17px;
            left:34px;
            border-radius:50%;
        }
        /*coluna com rotateZ para ficar em pé junto com o codigo */
        .column{
            width:150px;
            height:5px;
            border-radius:45px;
            top:24.5%;
            left:47.5%;
            transform: rotateZ(90deg);
            animation: explode-column 1s ease-out 6s forwards;
        }
        /*braco esquerdo (usei container pois a animação anterior era para acenar)*/
        .left-arm-container .left-shoulder{
            width: 50px;
            height:5px; 
            border-radius:45px; 
            transform:rotateZ(15deg);
          
        }
        .left-arm-container .left-top{
            width: 50px;
            height:5px; 
            border-radius:45px; 
            transform:rotateZ(-60deg) translate(-30px,-26px);
            
        }
        .left-arm-container .left-bottom{
            width: 50px;
            height:5px; 
            border-radius:45px; 
            transform:rotateZ(-125deg) translate(-30px,-70px);
        
        }
        .left-arm-container{
            top:18%;
            animation:explode-left-shoulder 1s ease-out 6s forwards;
            left:48.5%;
        }
        /*posicionamento dos ossos da coluna*/
        .column-parts{
            display:flex;
            top:19%;
            left:48%;
        }
        /*estilo comum dos ossos da coluna */
        .column-part{
            width:35px;
            height:5px;
            border-radius: 35px;

}
        /*nth-child para movimentar cada coluna individualmente */
        .column-part:nth-child(1){
            transform: rotateZ(10deg) translate(30px,0px);
            animation: explode-part1 1s ease-out 6s forwards;
        }
        .column-part:nth-child(2){
            transform: rotateZ(10deg) translate(30px,15px);
            animation: explode-part2 1s ease-out 6s forwards;
        }
        .column-part:nth-child(3){
            transform: rotateZ(5deg) translate(25px,35px);
            animation: explode-part3 1s ease-out 6s forwards;
        }
        .column-part:nth-child(4){
            transform: rotateZ(-5deg) translate(15px,60px);
            animation: explode-part4 1s ease-out 6s forwards;
        }
        .column-part:nth-child(5){
            transform: rotateZ(-5deg) translate(15px,75px);
            animation: explode-part5 1s ease-out 6s forwards;
        }

.column-part:nth-child(6){
            transform: rotateZ(-10deg) translate(65px,16px);
            animation: explode-part6 1s ease-out 6s forwards;
        }
        .column-part:nth-child(7){
            transform: rotateZ(-10deg) translate(65px,31px);
            animation: explode-part7 1s ease-out 6s forwards;
        }
        .column-part:nth-child(8){
            transform: rotateZ(-5deg) translate(70px,41px);
            animation: explode-part8 1s ease-out 6s forwards;
        }
        .column-part:nth-child(9){
            transform: rotateZ(5deg) translate(80px,51px);
            animation: explode-part9 1s ease-out 6s forwards;
        }
        .column-part:nth-child(10){
            transform: rotateZ(5deg) translate(80px,66px);
            animation: explode-part10 1s ease-out 6s forwards;
        }
        /*perna esquerda */
        .left-leg-container .left-top{
            width:70px;
            height:5px;
            border-radius:20px;
            transform: rotateZ(-70deg);
            animation: explode-left-leg-top 1s ease-out 6s forwards;
        }
        .left-leg-container .left-bottom{
            width:50px;
            height:5px;
            border-radius:20px;
            transform: rotateZ(65deg) translate(55px,20px);
            animation: explode-left-leg-bottom 1s ease-out 6s forwards;
        }
        .left-leg-container .left-foot{
            width:20px;
            height:5px;
            border-radius:20px;
            transform: rotateZ(-15deg) translate(0px,84px);
            animation: explode-left-foot 1s ease-out 6s forwards;
        }
        .left-leg-container{
            top:36%;
            left:48%;
            animation: thinkImWalking1 2s linear infinite;
        }
        /*animacoes usando scale para 'parecer' que está andando */
        @keyframes thinkImWalking1{
            0%,100%{scale:1;}
            50%{scale:1.25;}
        }
        @keyframes thinkImWalking2{
            0%,100%{scale:1.25;}
            50%{scale:1;}
        }
        /*perna direita*/
        .right-leg-container .right-top{
            width:70px;
            height:5px;
            border-radius:20px;
            transform: rotateZ(70deg);
            animation: explode-right-leg-top 1s ease-out 6s forwards;
        }
        .right-leg-container .right-bottom{
            width:50px;
            height:5px;
            border-radius:20px;
            transform: rotateZ(-65deg) translate(-49px,30px);
            animation: explode-right-leg-bottom 1s ease-out 6s forwards;
        }
        .right-leg-container .right-foot{
            width:20px;
            height:5px;
            border-radius:20px;
            transform: rotateZ(15deg) translate(39px,76px);
            animation: explode-right-foot 1s ease-out 6s forwards;
        }
        .right-leg-container{
            top:36%;
            animation: thinkImWalking2 2s linear infinite;
            left:50.4%;
        }
        /*braco esquerdo sem container (era para o esquerdo ser assim) */
        .right-shoulder{
            top:18%;
            left:51.5%;
            width: 50px;
            height:5px; 
            border-radius:45px; 
            transform:rotateZ(-15deg);
            animation: explode-right-shoulder 1s ease-out 6s forwards;
        }
        .right-top{
            top:18.5%;
            left:51.4%;
            width: 50px;
            height:5px; 
            border-radius:45px; 
            transform:rotateZ(60deg) translate(30px,-26px);
            animation: explode-right-top 1s ease-out 6s forwards;
        }
        .right-bottom{
            top:18%;
            left:51.4%;
            width: 50px;
            height:5px; 
            border-radius:45px; 
            transform:rotateZ(125deg) translate(30px,-70px);
            animation: explode-right-bottom 1s ease-out 6s forwards;
        }

/* Animações da explosão */
        @keyframes explode-head {
            to { transform: translate(-150px, 800px) rotateZ(360deg); }
        }

@keyframes explode-column {
            to { transform: rotateZ(90deg) translate(0px, 800px) rotateZ(720deg); }
        }

@keyframes explode-left-shoulder {
            to { transform: rotateZ(15deg) translate(-200px, 800px) rotateZ(-360deg); }
        }

@keyframes explode-left-top {
            to { transform: rotateZ(-60deg) translate(-250px, 850px) rotateZ(540deg); }
        }

@keyframes explode-left-bottom {
            to { transform: rotateZ(-125deg) translate(-180px, 900px) rotateZ(-540deg); }
        }

@keyframes explode-right-shoulder {
            to { transform: rotateZ(-15deg) translate(200px, 800px) rotateZ(360deg); }
        }

@keyframes explode-right-top {
            to { transform: rotateZ(60deg) translate(250px, 850px) rotateZ(-540deg); }
        }

@keyframes explode-right-bottom {
            to { transform: rotateZ(125deg) translate(180px, 900px) rotateZ(540deg); }
        }

@keyframes explode-part1 {
            to { transform: rotateZ(10deg) translate(-100px, 800px) rotateZ(360deg); }
        }

@keyframes explode-part2 {
            to { transform: rotateZ(10deg) translate(120px, 820px) rotateZ(-360deg); }
        }

@keyframes explode-part3 {
            to { transform: rotateZ(5deg) translate(-80px, 850px) rotateZ(540deg); }
        }

@keyframes explode-part4 {
            to { transform: rotateZ(-5deg) translate(90px, 880px) rotateZ(-540deg); }
        }

@keyframes explode-part5 {
            to { transform: rotateZ(-5deg) translate(-60px, 900px) rotateZ(720deg); }
        }

@keyframes explode-part6 {
            to { transform: rotateZ(-10deg) translate(140px, 830px) rotateZ(-720deg); }
        }

@keyframes explode-part7 {
            to { transform: rotateZ(-10deg) translate(-110px, 870px) rotateZ(360deg); }
        }

@keyframes explode-part8 {
            to { transform: rotateZ(-5deg) translate(160px, 890px) rotateZ(-360deg); }
        }

@keyframes explode-part9 {
            to { transform: rotateZ(5deg) translate(-90px, 920px) rotateZ(540deg); }
        }

@keyframes explode-part10 {
            to { transform: rotateZ(5deg) translate(170px, 940px) rotateZ(-540deg); }
        }

@keyframes explode-left-leg-top {
            to { transform: rotateZ(-70deg) translate(-130px, 800px) rotateZ(360deg); }
        }

@keyframes explode-left-leg-bottom {
            to { transform: rotateZ(65deg) translate(-80px, 850px) rotateZ(-360deg); }
        }

@keyframes explode-left-foot {
            to { transform: rotateZ(-15deg) translate(-50px, 900px) rotateZ(540deg); }
        }

@keyframes explode-right-leg-top {
            to { transform: rotateZ(70deg) translate(130px, 800px) rotateZ(-360deg); }
        }

@keyframes explode-right-leg-bottom {
            to { transform: rotateZ(-65deg) translate(80px, 850px) rotateZ(360deg); }
        }

@keyframes explode-right-foot {
            to { transform: rotateZ(15deg) translate(50px, 900px) rotateZ(-540deg); }
        }

भाषा को आगे बढाओ

अनुशंसित

एक कोड द्वारा alqsdeus

स्टीवेनोलैम द्वारा एक कोड

मेटेहन द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

एक कोड द्वारा alqsdeus

स्टीवेनोलैम द्वारा एक कोड

मेटेहन द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS