溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)如何使用純CSS實(shí)現(xiàn)一只紅色的憤怒小鳥的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
代碼解讀
定義dom，容器中包含6個(gè)元素，分別代表頭、眼睛、眉毛、嘴、冠羽、尾巴：
<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;
}
設(shè)置子元素的共有屬性：
.red*{
position:absolute;
}
.red*::before,
.red*::after{
content:'';
position:absolute;
}
定義容器尺寸：
.red{
width:12em;
height:11em;
font-size:16px;
position:relative;
}
畫出頭部輪廓，把描邊參數(shù)定義為變量，是因?yàn)楹竺孢€會(huì)用到：
.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;
}
畫出冠羽的左側(cè)：
.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;
}
用偽元素畫出冠羽的右側(cè)：
.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%;
}
接下來畫陰影，增強(qiáng)立體感。
為頭部增加陰影：
.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);
}
感謝各位的閱讀！關(guān)于“如何使用純CSS實(shí)現(xiàn)一只紅色的憤怒小鳥”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
