如何使用纯CSS实现一只红色的愤怒小鸟
这篇文章给大家分享的是有关如何使用纯CSS实现一只红色的愤怒小鸟的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
代码解读
定义dom，容器中包含6个元素，分别代表头、眼睛、眉毛、嘴、冠羽、尾巴：
<divclass="red">
<spanclass="head"></span>
<spanclass="eyes"></span>
<spanclass="eyebrows"></span>
<spanclass="mouth"></span>
<spanclass="hair"></span>
<spanclass="tail"></span>
</div>
居中显示：
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实现一只红色的愤怒小鸟”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
