Shulou(Shulou.com)06/01 Report--

This article is to share with you about how to achieve a clear image with pure CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Code interpretation

The whole character is divided into three parts: head, body and legs, which are drawn in this order, and the head is drawn first.

Define dom, container .baymax indicates white, and head represents header:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:rgba (176pd0re0pl 0.75)

}

Define the container size and child element alignment:

.baymax {

Width:30em

Height:41em

Font-size:10px

Display:flex

Justify-content:center

Position:relative

}

Draw the outline of the head:

.head {

Position:absolute

Width:9em

Height:6em

Background-color:white

Border-radius:50%

Box-shadow:

Inset0-1.5em3emrgba (0. 0. 0. 0. 2)

00.5em1.5emrgba (0Pert 00.2pm)

}

Draw the line between the eyes:

.head.eyes {

Position:absolute

Width:4.8em

Height:0.1em

Background-color:#222

Top:2.3em

Left:calc ((9em-4.8em) / 2)

}

Draw the 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

}

Next, draw the body.

Add the dom element of the body to the html file:

Define the width of the body:

.body {

Position:absolute

Width:inherit

}

Draw the 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 button in front of your chest:

.body.chest.button {

Position:absolute

Width:2em

Height:2em

Background-color:white

Border-radius:50%

Top:4em

Right:4em

Box-shadow:

Inset0-0.5em0.8emrgba (0pc0re0p0pl 0.15)

0.2em0.3em0.2emrgba (0B0R0B0B0B0R0B05R)

Filter:opacity (0.75)

}

Draw the 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:

Inset0-2.5em4emrgba (0pc0re0p0pl 0.15)

00.5em1.5emrgba (0pd0re0j0pl 0.25g)

}

Define the height starting point of the arm:

.body.arm {

Position:absolute

Top:7.5em

}

The arm is divided into parts above the elbow and below the elbow.

First design the common properties of these two paragraphs:

.body.arm:: before

.body.arm:: after {

Content:''

Position:absolute

Background-color:white

Border-radius:50%

Transform-origin:top

Z-index:-3

}

Then draw these two parts with pseudo elements:

.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:inset0.4em-1em1emrgba (0Pert 00.2pm)

}

Define the common attributes of two fingers:

.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

}

Draw two fingers with pseudo elements:

.body.arm.fingers:: before {

Top:22em

Left:2em

Transform:rotate (- 25deg)

Box-shadow:inset0.2em-0.4em0.4emrgba (0, 0, 0, 4)

}

.body.arm.fingers:: after {

Top:21.5em

Left:4.8em

Transform:rotate (- 5deg)

Box-shadow:inset-0.2em-0.4em0.8emrgba (0pd0re0re0pl 0.3)

Z-index:-3

}

At this point, the right arm is completed. Copy the right arm and flip it horizontally to get the left arm:

.body.arm.left {

Transform:scaleX (- 1)

Right:0

Z-index:-3

}

Next, draw the legs.

Add the dom element of the leg to the html file:

Draw the inside of the 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.6em0.7emrgba (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:inset0.7em1.5em0.7emrgba (0, 0, 0, 4)

}

At this point, the right leg is completed. Copy the right leg and flip it horizontally to get the left leg:

.leg.left {

Transform-origin:right

Transform:scaleX (- 1)

}

Thank you for reading! On "how to use pure CSS to achieve a clear image" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.