如何使用纯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实现一只红色的愤怒小鸟”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！