How to use pure CSS to implement a red Angry Bird (with code)

This article brings you the content is about how to use pure CSS to implement a red Angry Birds (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Effect Preview

Source code Download

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

Code interpretation

Defines the DOM, which contains 6 elements, each representing the head, eyes, eyebrows, mouth, feather, tail:

<div class= "Red" >    <span class= "Head" ></span>    <span class= "Eyes" ></span>    <span class= "Eyebrows" ></span>    <span class= "mouth" ></span>    <span class= " Hair "></span>    <span class=" tail "></span></div>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:antiquewhite;}

Set common properties for child elements:

. Red * {    position:absolute;}. Red *::before,.red *::after {    content: ';    Position:absolute;}

Define Container Dimensions:

. 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.2em solid #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 an eye with a pseudo-element:

. 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 eyeball and pupil with a radial gradient:

. eyes::before,.eyes::after {    background:         radial-gradient (            circle at Calc (Var (--eyeball-left) + 6%) 48%, White            0.1em,            transparent 0.1em        ),        radial-gradient (            circle at Var (--eyeball-left) 48%,            Black 0.5em,            transparent 0.5em        ), white        ;}. Eyes::before {    --eyeball-left:65%;}. eyes::after {    --eyeball-left:41%;}

To draw an eyebrow with a pseudo-element:

. 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:20% 0 20% 10%;    Transform:rotate (34deg) skewx ( -15deg);    Border:0.1em solid black;}

Use pseudo-elements to draw the dividing line of the upper jaw:

. mouth::before {    width:3.4em;    Height:4em;    Border:0.2em solid;    Top: -1.6em;    Left: -1.8em;    border-radius:0 0 40% 0;    Transform:rotate (42deg);    Border-color:transparent black transparent transparent;}

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;}

Use pseudo-elements to draw the right side of the Crown feathers:

. 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 extra edges of the Crown feathers with pseudo-elements:

. hair::after {    width:3em;    Height:2em;    Background-color: #dc002d;    border-radius:50%;    Top:2.3em;    Left: -1.5em;    Transform:rotate (70deg);}

To draw the longest feather in a tail:

. tail {    width:3em;    Height:1em;    Background-color:black;    top:40%;    Left: -1.8em;    Z-index:-1;    Transform:rotate (15deg);}

Use pseudo-elements to draw a short two feathers in the tail:

. 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;}

To paint a chest feather with a pseudo-element:

. 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 stereoscopic sense.

Add a shadow to the head:

. Head {    Box-shadow:       inset 0.5em-0.5em 0.3em 0.2em rgba (0, 0, 0, 0.2),      inset-1em 0.8em 1.5em-0.5em Rgba (2 37, 178, 144, 0.7);}

Add Shadow to Eye:

. eyes::before {    Box-shadow: -0.2em 0.2em 0.2em 0.3em rgba (0, 0, 0, 0.2);}. Eyes::after {    box-shadow:0.2em 0.2em 0.4em 0.3em rgba (0, 0, 0, 0.1);}

Add a shadow to your mouth:

. Mouth {    Box-shadow:       inset 0.2em-0.4em 1em rgba (0, 0, 0, 0.4),      inset 0 0.5em 0.5em rgba (255, 255, 255, 0.3);}

Done!