Awesome Astronaut Animation using Html & CSS Withot Images

Preview

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Austronaut Animation</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap">
</head>
<body>
    
<div class="wrapper">
    <div class="container">
        <div class="stars"></div>
        <div class="planet">
            <div class="shadow"></div>
        </div>
        <div class="astronaut">
            <div class="tank center"></div>
            <div class="suit center">
                <div class="helmet center"></div>
                <div class="buttons center"></div>
                <div class="hand-l"></div>
                <div class="hand-r"></div>
                <div class="leg-l"></div>
                <div class="leg-r"></div>
                <div class="pipe"></div>
            </div>
        </div>
    </div>
    <a href="https://interestingcodeplus.blogspot.com/" target="_blank">
        My Website
    </a>
</div>

</body>
</html>

CSS Code:


body{
    background-color: #171640;
    padding: 0;
    margin: 0;
}
.wrapper{
    position: absolute;
    width: 31.25em;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
.container{
    position: relative;
    height: 31.25em;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
}
a{
    font-family: "Poppins", sans-serif;
    display: block;
    text-align: center;
    font-size: 1.4em;
    padding: 1em 0;
    margin-top: 2em;
    border-radius: 0.4em;
    background-color: #fbd31f;
    color: #171640;
    text-decoration: none;
}
.center{
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%;
}
.planet{
    height: 12.5em;
    width: 12.5em;
    border-radius: 50%;
    position: absolute;
    background-color: #f5d201;
    top: 2.81em;
    left: 13.75em;
    animation: planets 4s infinite;
}
@keyframes planets{
    50%{
        -webkit-transform: rotate(-30deg) translateY(1.87em);
        transform: translateY(-1em) translateX(1em);
    }
}
.planet::before{
    position: absolute;
    content: '';
    background-color: #fcec8e;
    height: 1.25em;
    width: 6.87em;
    border-radius: 0.62em;
    top: 3em;
    left: 4.25em;
    -webkit-box-shadow: 1.43em 3.65em 0 -0.25em #fcec8e, -1.25em 4.75em 0 0.12em #fcec8e;
    box-shadow: 1.43em 3.65em 0 -0.25em #fcec8e, -1.25em 4.75em 0 0.12em #fcec8e;
}
.planet::after{
    position: absolute;
    content: '';
    background-color: #edb514;
    height: 0.75em;
    width: 2.5em;
    border-radius: 0.46em;
    top: 1.87em;
    left: 3em;
    -webkit-box-shadow: -1.25em 3.75em 0 0.37em #edb514, 4.06em 8.43em 0 0.12em #edb514;
    box-shadow: -1.25em 3.75em 0 0.37em #edb514, 4.06em 8.43em 0 0.12em #edb514;
}
.shadow{
    position: absolute;
    background-color: transparent;
    -webkit-box-shadow: 0.93em 0.93em rgba(134, 123, 5, 0.3);
    box-shadow: 0.93em 0.93em rgba(134, 123, 5, 0.3);
    height: 12.5em;
    width: 12.5em;
    border-radius: 50%;
    bottom: 0.93em;
    right: 0.93em;
}
.astronaut{
    position: absolute;
    height: 17.5em;
    width: 15.62em;
    top: 7.5em;
    left: 6.25em;
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-30deg);
    -webkit-animation: float 4s infinite;
    animation: float 4s infinite;
}
@-webkit-keyframes float{
    50%{
        -webkit-transform: rotate(-30deg) translateY(1.87em);
        transform: rotate(-30deg) translateY(1.87em);
    }
}
@keyframes float{
    50%{
        -webkit-transform: rotate(-30deg) translateY(1.87em);
        transform: rotate(-30deg) translateY(1.87em);
    }
}
.suit{
    position: absolute;
    background-color: #e2e9f4;
    height: 6.25em;
    width: 6.25em;
    border-radius: 10%;
    top: 5.5em;
}
.helmet{
    background-color: #e2e9f4;
    height: 5.8125em;
    width: 6.25em;
    border-radius: 45%;
    position: absolute;
    top: -5.43em;
}
.helmet::before{
    position: absolute;
    content: '';
    background-color: #64c1f7;
    height: 3.75em;
    width: 5em;
    border-radius: 60% 60% 40% 40%;
    left: 0.62em;
    top: 0.43em;
    animation: helmets 4s infinite;
}
@keyframes helmets {
    50%{
        top: 0.8em;
    }
}
.helmet::after{
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.3);
    height: 0.93em;
    width: 0.93em;
    border-radius: 50%;
    left: 1.25em;
    top: 1.56em;
}
.tank{
    position: absolute;
    background-color: #aec3d2;
    height: 7.5em;
    width: 7.5em;
    border-radius: 0.62em;
    top: 5em;
}
.buttons{
    background-color: #bdd3f3;
    width: 3.43em;
    height: 1.87em;
    border-radius: 0.5em;
    position: absolute;
    top: 1.56em;
}
.buttons::after{
    position: absolute;
    content: '';
    height: 0.75em;
    width: 0.75em;
    border-radius: 50%;
    background-color: #1683ed;
    top: 0.62em;
    left: 0.25em;
    -webkit-box-shadow: 1.12em 0 #fbd31f, 2.25em 0 #e62c1b;
    box-shadow: 1.12em 0 #fbd31f, 2.25em 0 #e62c1b;
}
.buttons::before{
    position: absolute;
    content: '';
    height: 1.25em;
    width: 1.25em;
    border-radius: 50%;
    background-color: #aec3d2;
    top: 2.5em;
    left: 1.12em;
}
.hand-l, .hand-r{
    position: absolute;
    height: 1.62em;
    width: 4.68em;
    background-color: #e2e9f4;
    border-radius: 2.5em;
    top: -0.62em;
}
.hand-l{
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    left: -3.12em;
    animation: hands 4s infinite;
}
.hand-r{
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    right: -3.12em;
    animation: hands 4s infinite;
}
@keyframes hands {
    50%{
        transform: rotate(-5deg);
    }
}
.hand-l::before, .hand-r::before{
    position: absolute;
    content: '';
    height: 1.62em;
    width: 4.81em;
    background-color: #e2e9f4;
    border-radius: 1.62em;
    bottom: 1.62em;
}
.hand-r::before{
    left: 1.87em;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.hand-l::before{
    right: 1.87em;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.hand-l::after, .hand-r::after{
    position: absolute;
    content: '';
    background-color: #e62c1b;
    width: 1.75em;
    height: 0.34em;
    border-radius: 0.81em;
    top: -1.56em;
}
.hand-l::after{
    left: -0.43em;
}
.hand-r::after{
    right: -0.43em;
}
.leg-l, .leg-r{
    height: 6.25em;
    width: 2.5em;
    background-color: #e2e9f4;
    position: absolute;
    top: 5em;
}
.leg-l{
    left: -0.75em;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    animation: legs 4s infinite;
}
.leg-r{
    right: -0.75em;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    animation: legs 4s infinite;
}
@keyframes legs {
    50%{
        transform: rotate(1deg);
    }
}
.leg-l::before, .leg-r::before{
    position: absolute;
    content: '';
    background-color: #ffffff;
    width: 2.68em;
    height: 2.18em;
    border-radius: 50% 50% 0 0;
    top: 4.06em;
    left: -0.09em;
}
.leg-l::after, .leg-r::after{
    position: absolute;
    content: '';
    background-color: #ff6347;
    width: 2.81em;
    height: 0.31em;
    border-radius: 1em;
    bottom: -0.09em;
    left: -0.15em;
}
.pipe{
    position: absolute;
    background-color: transparent;
    height: 2.5em;
    width: 6.25em;
    border: 0.62em solid #3cb9f0;
    border-top: none;
    border-radius: 0 0 3.75em 1.87em;
    left: 2.81em;
    top: 4.5em;
}
.pipe::before{
    position: absolute;
    content: '';
    background-color: transparent;
    height: 2.5em;
    width: 2.81em;
    border: 0.62em solid #3cb9f0;
    border-left: none;
    border-bottom: none;
    top: -3.12em;
    left: 3.43em;
    border-radius: 0 2.5em 0 0;
}
.stars{
    background-color: #ffffff;
    width: 0.31em;
    height: 0.31em;
    border-radius: 50%;
    position: absolute;
    top: 9.37em;
    left: 3.75em;
    -webkit-box-shadow: 
    4.37em 9.37em #ffffff, 
    5.62em -6.25em #ffffff, 
    17.5em 15.62em #ffffff, 
    22.75em 7.5em #ffffff, 
    3.75em 16.25em #ffffff;
    box-shadow: 
    4.37em 9.37em #ffffff, 
    5.62em -6.25em #ffffff, 
    17.5em 15.62em #ffffff, 
    22.75em 7.5em #ffffff, 
    3.75em 16.25em #ffffff;

    -webkit-animation: twinkle 3s infinite;
    animation: twinkle 3s infinite;
}
@-webkit-keyframes twinkle{
    50%{
        opacity: 0.2;
    }
}
@keyframes twinkle{
    50%{
        opacity: 0.2;
    }
}

@media screen and (max-width: 500px){
    .wrapper{
        font-size: 10px;
    }
}

That’s all! I hope, you have successfully created This Awesome Austronaut Animation using Html & CSS Withot Images. If you have any questions or suggestions, let me know by comment below. Happy coding 😊

INTERESTING Code

Awesome Astronaut Animation using Html & CSS Withot Images

Awesome Astronaut Animation using Html & CSS Withot Images

Preview

Post a Comment

0 Comments

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget

INTERESTING Code

Awesome Astronaut Animation using Html & CSS Withot Images

Awesome Astronaut Animation using Html & CSS Withot Images

Preview

Post a Comment

0 Comments

Social Media

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget