效果預覽

在線演示

按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。

https://codepen.io/comehope/pen/VBGWqX

可交互視頻

此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/cVweZAr

源代碼下載

本地下載

每日前端實戰系列的全部源代碼請從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，容器中包含 3 個元素，分別代表耳朵、眼睛、鼻子：

<div class="pig"><span class="ears"></span><span class="eyes"></span><span class="nose"></span> </div>

居中顯示：

body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: skyblue; }

設置偽元素的共有屬性，后面有多處用到偽元素：

.pig::before, .pig::after, .pig *::before, .pig *::after {content: '';position: absolute; }

定義容器尺寸：

.pig {width: 12em;height: 10em;font-size: 20px;background-color: #50a032;border: 0.2em solid #2b4d13; }

用圓角屬性畫出頭部輪廓：

.pig {border-radius: 50% 50% 50% 50% / 55% 60% 40% 45%; }

畫出鼻子的輪廓：

.pig {position: relative; }.nose {position: absolute;width: 4.6em;height: 4em;background-color: #82b923;border: 0.1em solid #1d3c07;border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%;top: 3em;left: 4.2em; }

用偽元素畫出鼻孔：

.nose::before, .nose::after {width: 1.2em;background-color: #0f2d00;border-radius: 50%;top: 1.4em; }.nose::before {left: 0.8em;height: 1.8em; }.nose::after {right: 0.8em;height: 1.6em; }

畫出眼睛的輪廓：

.eyes::before, .eyes::after {width: 2.8em;height: 2.8em;background: white;border-radius: 50%;border: 0.1em solid #193c09;top: 3.6em; }.eyes::before {left: 0.8em; }.eyes::after {right: 0.3em; }

用徑向漸變畫出眼珠：

.eyes::before, .eyes::after {background: radial-gradient(circle at var(--eyeball-left) 1.5em,black 0.4em,transparent 0.4em),white; }.eyes::before {--eyeball-left: 1em; }.eyes::after {--eyeball-left: 1.9em; }

畫出內耳的輪廓：

.ears::before, .ears::after {width: 0.8em;height: 0.9em;background-color: #2f6317;border: 0.1em solid #1d3a0d;border-radius: 45% 45% 45% 45% / 55% 45% 55% 45%; }.ears::before {top: 0.3em;left: 1.3em; }.ears::after {top: -1.1em;right: 5.8em; }

用陰影畫出外耳：

.ears::before {color: #50a032;box-shadow: 0.4em 0.7em 0 -0.2em,-0.2em 0.7em 0 -0.1em,-0.6em 0.5em 0 -0.2em,-0.1em -0.2em 0 0.4em,-0.1em -0.2em 0 0.6em #2b4d13;transform: rotate(-40deg); }.ears::after {color: #5cb739;box-shadow: 0.3em 0.6em 0 -0.2em,-0.1em 0.6em 0 -0.1em,-0.6em 0.6em 0 -0.2em,-0.1em -0.2em 0 0.4em,-0.1em -0.2em 0 0.6em #2b4d13;transform: rotate(-6deg); }

用偽元素畫出眉毛：

.pig::before, .pig::after {width: 1.4em;height: 1em;border-top: 0.5em solid #0f2d00;top: 2.3em;border-radius: 50% 50% 0 0 / 40% 40% 0 0; }.pig::before {left: 1.2em;transform: rotate(-20deg); }.pig::after {right: 1em;transform: rotate(25deg); }

接下來設置陰影，增加立體效果。
為頭部增加陰影效果：

.pig {box-shadow: inset -1.5em 1em 1.5em -0.5em rgba(255, 255, 255, 0.3),inset 0.5em -0.5em 0.8em 0.2em rgba(0, 0, 0, 0.2); }

為鼻子增加陰影效果：

.nose {box-shadow: -0.1em 0.5em 0.2em 0.1em rgba(68, 132, 36, 0.6); }.nose::before, .nose::after {box-shadow: inset -0.3em -0.2em 0.1em -0.1em #2d6b1f; }

為眼睛增加陰影效果：

.eyes::before, .eyes::after {box-shadow: inset 0.3em -0.6em 0.5em -0.2em rgba(0, 0, 0, 0.3),-0.1em 0.5em 0.2em 0.1em rgba(68, 132, 36, 0.6); }

大功告成！

原文地址：https://segmentfault.com/a/1190000015909608

總結

以上是生活随笔為你收集整理的如何用纯 CSS 创作一只愤怒小鸟中的绿猪的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。