如何使用純CSS實現一頭綠豬的效果

本篇文章給大家帶來的內容是關於如何使用純CSS實現一頭綠豬的效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

效果預覽

原始碼下載

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

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

代碼解讀

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

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

置中顯示：

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);}