如何使用纯CSS实现一只红色的愤怒小鸟

居中显示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background-color:antiquewhite;

}

设置子元素的共有属性：

.red*{

position:absolute;

}

.red*::before,

.red*::after{

content:'';

position:absolute;

}

定义容器尺寸：

.red{

width:12em;

height:11em;

font-size:16px;

position:relative;

}

画出头部轮廓，把描边参数定义为变量，是因为后面还会用到：

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

}

用伪元素画出眼睛的轮廓：

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

}

用径向渐变画出眼珠和瞳孔：

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

}

用伪元素画出眉毛：

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

}

画出嘴的轮廓：

.mouth{

width:2.8em;

height:2.8em;

background-color:#fca90d;

top:6em;

left:7em;

z-index:3;

border-radius:20%020%10%;

transform:rotate(34deg)skewX(-15deg);

border:0.1emsolidblack;

}

用伪元素画出上下颌的分界线：

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

}

画出冠羽的左侧：

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

}

用伪元素画出冠羽的右侧：

.hair::before{

width:inherit;

height:inherit;

background-color:inherit;

border-radius:inherit;

border:inherit;

top:1em;

left:0.8em;

transform:rotate(20deg);

}

用伪元素把冠羽多余的搭边线遮盖住：

.hair::after{

width:3em;

height:2em;

background-color:#dc002d;

border-radius:50%;

top:2.3em;

left:-1.5em;

transform:rotate(70deg);

}

画出尾巴中最长的一根羽毛：

.tail{

width:3em;

height:1em;

background-color:black;

top:40%;

left:-1.8em;

z-index:-1;

transform:rotate(15deg);

}

用伪元素画出尾巴中较短的两根羽毛：

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

}

用伪元素画出胸前的羽毛：

.head{

overflow:hidden;

}

.head::before{

width:inherit;

height:inherit;

background-color:#e3c4ab;

border-radius:inherit;

top:65%;

left:25%;

}

接下来画阴影，增强立体感。

为头部增加阴影：

.head{

box-shadow:

inset0.5em-0.5em0.3em0.2emrgba(0,0,0,0.2),

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

}

为眼睛增加阴影：

.eyes::before{

box-shadow:-0.2em0.2em0.2em0.3emrgba(0,0,0,0.2);

}

.eyes::after{

box-shadow:0.2em0.2em0.4em0.3emrgba(0,0,0,0.1);

}

为嘴增加阴影：

.mouth{

box-shadow:

inset0.2em-0.4em1emrgba(0,0,0,0.4),

inset00.5em0.5emrgba(255,255,255,0.3);

}

感谢各位的阅读！关于“如何使用纯CSS实现一只红色的愤怒小鸟”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！