溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關如何使用純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實現一只紅色的憤怒小鳥”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
