Front-end daily combat: 151 # white video shows how to create super Marines with pure CSS

Results preview

Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.

https://codepen.io/comehope/pen/ReGRaO

Interactive video

This video is interactive, you can pause the code video, editing video.

Please use chrome, safari, edge open view.

https://scrimba.com/p/pEgDAM/cEJDKSg

Source code download

Daily front-end combat series full source code can be downloaded from github:

https://github.com/comehope/front-end-daily-challenges

Code Reading

The whole character is divided into three parts: head, body, legs, following in that order respectively draw, first draw a head.
Defined dom, the container .baymaxindicates white, heada header indicating:

<div class="baymax">
    <div class="head">
        <div class="eyes"></div>
    </div>
</div>

Centered:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(176, 0, 0, 0.75);
}

Defined container sizes and alignment of sub-elements:

.baymax {
    width: 30em;
    height: 41em;
    font-size: 10px;
    display: flex;
    justify-content: center;
    position: relative;
}

Draw head profile:

.head {
    position: absolute;
    width: 9em;
    height: 6em;
    background-color: white;
    border-radius: 50%;
    box-shadow: 
        inset 0 -1.5em 3em rgba(0, 0, 0, 0.2),
        0 0.5em 1.5em rgba(0, 0, 0, 0.2);
}

Intermediate lines drawn eyes:

.head .eyes {
    position: absolute;
    width: 4.8em;
    height: 0.1em;
    background-color: #222;
    top: 2.3em;
    left: calc((9em - 4.8em) / 2);
}

Draw eyes:

.head .eyes::before,
.head .eyes::after {
    content: '';
    position: absolute;
    width: 0.8em;
    height: 0.9em;
    background-color: #222;
    border-radius: 50%;
    top: -0.3em;
}

.head .eyes::after {
    right: 0;
}

Then draw the body.
html file, increase the body's dom elements:

<div class="baymax">
    <div class="head">
        <!-- 略 -->
    </div>
    <div class="body">
        <div class="chest">
            <span class="button"></span>
        </div>
        <div class="belly"></div>
        <div class="left arm">
            <div class="fingers"></div>
        </div>
        <div class="right arm">
            <div class="fingers"></div>
        </div>
    </div>
</div>

Define the width of the body:

.body {
    position: absolute;
    width: inherit;
}

Draw Chest:

.body .chest {
    position: absolute;
    width: 19em;
    height: 26em;
    background-color: white;
    top: 4em;
    left: calc((100% - 19em) / 2);
    border-radius: 50%;
    z-index: -1;
}

Draw the chest of a button:

.body .chest .button {
    position: absolute;
    width: 2em;
    height: 2em;
    background-color: white;
    border-radius: 50%;
    top: 4em;
    right: 4em;
    box-shadow: 
        inset 0 -0.5em 0.8em rgba(0, 0, 0, 0.15),
        0.2em 0.3em 0.2em rgba(0, 0, 0, 0.05);
    filter: opacity(0.75);
}

Draw belly:

.body .belly {
    position: absolute;
    width: 24em;
    height: 31em;
    background-color: white;
    top: 5.5em;
    left: calc((100% - 24em) / 2);
    border-radius: 50%;
    z-index: -2;
    box-shadow: 
        inset 0 -2.5em 4em rgba(0, 0, 0, 0.15),
        0 0.5em 1.5em rgba(0, 0, 0, 0.25);
}

Arm height defined starting point:

.body .arm {
    position: absolute;
    top: 7.5em;
}

In two or more arms and elbows of the elbow portions following sections.
First design of these two common attributes:

.body .arm::before,
.body .arm::after {
    content: '';
    position: absolute;
    background-color: white;
    border-radius: 50%;
    transform-origin: top;
    z-index: -3;
}

Pseudo-elements are then drawn two parts:

.body .arm::before {
    width: 9em;
    height: 20em;
    left: 7em;
    transform: rotate(30deg);
}

.body .arm::after {
    width: 8em;
    height: 15em;
    left: -0.8em;
    top: 9.5em;
    transform: rotate(-5deg);
    box-shadow: inset 0.4em -1em 1em rgba(0, 0, 0, 0.2);
}

The definition of a total of two fingers attributes:

.body .arm .fingers::before,
.body .arm .fingers::after {
    content: '';
    position: absolute;
    width: 1.8em;
    height: 4em;
    background-color: white;
    border-radius: 50%;
    transform-origin: top;
}

Pseudo-elements are shown with two fingers:

.body .arm .fingers::before {
    top: 22em;
    left: 2em;
    transform: rotate(-25deg);
    box-shadow: inset 0.2em -0.4em 0.4em rgba(0, 0, 0, 0.4);
}

.body .arm .fingers::after {
    top: 21.5em;
    left: 4.8em;
    transform: rotate(-5deg);
    box-shadow: inset -0.2em -0.4em 0.8em rgba(0, 0, 0, 0.3);
    z-index: -3;
}

This completes the right arm. Copy the right arm and flipped horizontally, you can get the left arm:

.body .arm.left {
    transform: scaleX(-1);
    right: 0;
    z-index: -3;
}

The next leg draw.
Increased leg dom element in the html file:

<div class="baymax">
    <div class="head">
        <!-- 略 -->
    </div>
    <div class="body">
        <!-- 略 -->
    </div>
    <div class="left leg"></div>
    <div class="right leg"></div>
</div>

Draw inner leg:

.leg {
    position: absolute;
    width: 5em;
    height: 16em;
    bottom: 0;
    background-color: white;
    border-bottom-right-radius: 1.5em;
    left: 10em;
    box-shadow: inset -0.7em -0.6em 0.7em rgba(0, 0, 0, 0.1);
    z-index: -3;
}

Draw the outside of the leg:

.leg::before {
    content: '';
    position: absolute;
    width: 2.5em;
    height: inherit;
    background-color: white;
    border-bottom-left-radius: 100%;
    left: -2.5em;
    box-shadow: inset 0.7em 1.5em 0.7em rgba(0, 0, 0, 0.4);
}

This completes the right leg. Copy the right leg and flipped horizontally, you can get left leg:

.leg.left {
    transform-origin: right;
    transform: scaleX(-1);
}

We're done!