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

不言
Release: 2018-08-18 16:57:31
Original
2530 people have browsed it

The content of this article is about how to use pure CSS to realize a black Angry Bird (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. You helped.

Effect preview

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

Source code download

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

Code Interpretation

Define dom, the elements contained in the container represent respectively

Copy after login

Centered display:

body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: turquoise; }
Copy after login

Define the common attributes of container size and pseudo-element:

.black-bomb { width: 13em; height: 13em; font-size: 16px; } .black-bomb *::before, .black-bomb *::after { content: ''; position: absolute; }
Copy after login

Draw the outline of the head:

.black-bomb { position: relative; } .head { position: absolute; width: inherit; height: inherit; background-color: #0f1110; border-radius: 45% 55% 45% 55% / 55% 50% 50% 45%; }
Copy after login

Use pseudo elements to draw the outline of the eyes:

.eyes::before, .eyes::after { width: 3.4em; height: 3.4em; background-color: #4e4e4e; border-radius: 50%; } .eyes::before { top: 2.7em; left: 21%; } .eyes::after { top: 2.5em; right: 7%; }
Copy after login

Use radial gradient to draw the eyeballs and pupils:

.eyes::before, .eyes::after { background-image: radial-gradient( circle at var(--left3) 1.7em, white 0.1em, transparent 0.1em ), radial-gradient( circle at var(--left2) 1.6em, black 0.6em, transparent 0.6em ), radial-gradient( circle at var(--left1) 1.4em, white 1em, transparent 1em ); } .eyes::before { --left1: 2em; --left2: 2.3em; --left3: 2.4em; } .eyes::after { --left1: 1.2em; --left2: 0.9em; --left3: 0.8em; }
Copy after login

Use pseudo elements to draw the eyebrows:

.eyebrows::before, .eyebrows::after { width: 5.3em; height: 0.8em; background: #cb3c1a; } .eyebrows::before { top: 2.3em; left: 1em; transform: rotate(10deg); } .eyebrows::after { top: 2.2em; right: -0.6em; transform: rotate(-10deg); }
Copy after login

Draw the outline of the mouth:

.mouth { position: absolute; width: 3.6em; height: 3.6em; background-color: #fca90d; top: 4em; left: 6.4em; border-radius: 80% 0 30% 20%; transform: rotate(34deg); border: 0.1em solid black; }
Copy after login

Use pseudo elements to draw the dividing line between the upper and lower jaw:

.mouth::before { width: 2.6em; height: 5.7em; border: 0.2em solid; border-radius: 80% 0 0 16%; transform: rotate(35deg); top: -1.1em; left: 1.4em; border-color: transparent transparent transparent black; }
Copy after login

Draw Feathers on the chest:

.head { overflow: hidden; } .head::before { width: inherit; height: inherit; background-color: #474642; border-radius: inherit; top: 76%; left: 12%; }
Copy after login

Draw the crest feathers:

.hair { position: absolute; width: 1.4em; height: 5em; background-color: #0f1110; top: -3.8em; left: 20%; border-radius: 0 0 40% 40% / 0 0 100% 100%; } .hair::before { width: 80%; height: 1em; background-color: #ffc000; top: 0.3em; left: 10%; }
Copy after login

Adjust the shape of the crest feathers:

.hair { transform: rotate(-28deg) skewX(10deg) skewY(-50deg); }
Copy after login

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

Add shadow to the head:

.head { box-shadow: inset -1em 0.5em 1.5em -0.5em rgba(255, 255, 255, 0.3); } .head::after { width: inherit; height: inherit; border-radius: inherit; box-shadow: inset 0.5em -0.5em 0.3em 0.2em rgba(0, 0, 0, 0.2); }
Copy after login

Add shadow to the mouth:

.mouth { box-shadow: inset 0 0.5em 0.5em rgba(255, 255, 255, 0.3), inset 0.2em -0.5em 1.2em rgba(0, 0, 0, 0.5); }
Copy after login

Done!

Related recommendations:

How to use CSS and D3 to achieve the black and white overlapping animation effect

How to use CSS to achieve the effect of the truck loader

The above is the detailed content of How to use pure CSS to implement a black Angry Bird (with code). For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!