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

This article is about how to use pure CSS to implement a red Angry Birds. 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

Define dom. The container contains 6 elements, representing head, eyes, eyebrows, mouth, crown feather, and tail.

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:antiquewhite

}

Set the common properties of child elements:

.red * {

Position:absolute

}

.red *:: before

.red *:: after {

Content:''

Position:absolute

}

Define the container size:

.red {

Width:12em

Height:11em

Font-size:16px

Position:relative

}

Draw the outline of the head and define the stroke parameter as a variable because it will be used later:

.red {

-- border:0.2emsolid#6a0306

}

.head {

Width:inherit

Height:inherit

Background-color:#dc002d

Border-radius:45%55%45%45%/55%60%40%45%

Border:var (--border)

}

To draw the outline of the eye with pseudo elements:

.eyes:: before

.eyes:: after {

Width:2.4em

Height:2.6em

Background:white

Border-radius:50%

Border:var (--border)

}

.eyes:: before {

Top:3.7em

Left:5.5em

Z-index:1

}

.eyes:: after {

Top:3.8em

Left:7.8em

}

Draw the eyes and pupils with a radial gradient:

.eyes:: before

.eyes:: after {

Background:

Radial-gradient (

Circleatcalc (var (--eyeball-left) + 6) 48%

White0.1em

Transparent0.1em

),

Radial-gradient (

Circleatvar (--eyeball-left) 48%

Black0.5em

Transparent0.5em

),

White

}

.eyes:: before {

-- eyeball-left:65%

}

.eyes:: after {

-- eyeball-left:41%

}

Draw eyebrows with pseudo elements:

.eyebrows:: before

.eyebrows:: after {

Height:1.1em

Background-color:black

Top:3.6em

Z-index:2

}

.eyebrows:: before {

Left:5em

Transform:skewY (12deg)

Width:3.4em

}

.eyebrows:: after {

Left:8.2em

Transform:skewY (- 15deg)

Width:3.1em

}

Draw the outline of the mouth:

.mouth {

Width:2.8em

Height:2.8em

Background-color:#fca90d

Top:6em

Left:7em

Z-index:3

Border-radius:200%

Transform:rotate (34deg) skewX (- 15deg)

Border:0.1emsolidblack

}

To draw the dividing line between the upper and lower jaw with pseudo elements:

.mouth:: before {

Width:3.4em

Height:4em

Border:0.2emsolid

Top:-1.6em

Left:-1.8em

Border-radius:0040%0

Transform:rotate (42deg)

Border-color:transparentblacktransparenttransparent

}

Draw the left side of the crown feather:

.hair {

Width:1.2em

Height:3em

Background-color:#dc002d

Border-radius:50%

Border:var (--border)

Top:-1.8em

Left:2.8em

Transform:rotate (- 70deg)

Border-bottom-color:transparent

}

Draw the right side of the crown feather with pseudo elements:

.hair:: before {

Width:inherit

Height:inherit

Background-color:inherit

Border-radius:inherit

Border:inherit

Top:1em

Left:0.8em

Transform:rotate (20deg)

}

To cover the superfluous border of the crown and feather with pseudo elements:

.hair:: after {

Width:3em

Height:2em

Background-color:#dc002d

Border-radius:50%

Top:2.3em

Left:-1.5em

Transform:rotate (70deg)

}

Draw the longest feather in the tail:

.tail {

Width:3em

Height:1em

Background-color:black

Top:40%

Left:-1.8em

Z-index:-1

Transform:rotate (15deg)

}

Draw two shorter feathers in the tail with pseudo elements:

.tail:: before

.tail:: after {

Width:inherit

Height:70%

Background-color:black

Left:0.6em

}

.tail:: before {

Transform:rotate (25deg)

Top:-0.4em

}

.tail:: after {

Transform:rotate (- 20deg)

Top:0.8em

}

Draw the feathers on the chest with pseudo elements:

.head {

Overflow:hidden

}

.head:: before {

Width:inherit

Height:inherit

Background-color:#e3c4ab

Border-radius:inherit

Top:65%

Left:25%

}

Next, draw shadows to enhance the three-dimensional sense.

Add shadows to the head:

.head {

Box-shadow:

Inset0.5em-0.5em0.3em0.2emrgba (0Pert 00.2pm)

Inset-1em0.8em1.5em-0.5emrgba (237, 178, 144, 0.7)

}

Add shadows to the eyes:

.eyes:: before {

Box-shadow:-0.2em0.2em0.2em0.3emrgba (0Pert 00.2pm)

}

.eyes:: after {

Box-shadow:0.2em0.2em0.4em0.3emrgba (0. 0. 1)

}

Add shadows to the mouth:

.mouth {

Box-shadow:

Inset0.2em-0.4em1emrgba (0, 0, 0, 4)

Inset00.5em0.5emrgba (255pr. 255pr. 0.3)

}

Thank you for reading! This is the end of this article on "how to use pure CSS to achieve a red Angry Birds". 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 for more people to see!

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.