純CSS+HTML繪製小豬佩奇---泥腿子前端出品

年前也不知從具體何時開始我兒子迷上了小豬佩奇，再加上朋友圈瘋狂傳播的鼓風機版小豬佩奇宣傳片，這兩件事情促使我這個泥腿子前端產生了用代碼繪製一副小豬佩奇圖案的想法，做爲一名「優秀的」開發來講，有想法就落實到行動中，這是必須的職業素養。代碼是1月22號完成的，當時想發表出來的，因爲年末工做比較繁忙，就拖到了如今。話很少說，先上效果圖：

繪製這張圖時，HTML主要就是div盒模型，css主要運用到了border-radius以及transform屬性，例如繪製佩奇裙子的時候CSS和HTML代碼以下：

/* 佩奇身體 泥腿子前端*/
.pigBody {
   background-color: #de384e;
   border: 6px solid #BE002E;
   position: absolute;
   z-index: 16;
   bottom: 94px;
   left: 300px;
   width: 150px;
   height: 116px;
   box-sizing: border-box;
   border-radius: 110% 110% 0 0/260% 260% 0 0;
}
<!-- 佩奇身體 start 泥腿子前端-->
<div class="pigBody"></div>
<!-- 佩奇身體 end 泥腿子前端-->複製代碼

裙子效果如圖：

這個難點就是要弄懂border-radius 屬性的具體定義和用法，border-radius 屬性是一個簡寫屬性，用於設置四個 border-*-radius 屬性。

border-radius: 1-4 length|% / 1-4 length|%;複製代碼

按此順序設置每一個 radii 的四個值。若是省略 bottom-left，則與 top-right 相同。若是省略 bottom-right，則與 top-left 相同。若是省略 top-right，則與 top-left 相同。

border-radius: 2px 1px 4px / 0.5px 3px;
複製代碼

等同於

border-top-left-radius: 2px 0.5px;
border-top-right-radius: 1px 3px;
border-bottom-right-radius: 4px 0.5px;
border-bottom-left-radius: 1px 3px;
複製代碼

掌握了這點小豬佩繪製就簡單多了，就是工做量的事情。

這張圖中看似複雜的我我的以爲就是佩奇的尾巴了，我是用了幾個圖塊拼接的，效果圖以下：

CSS和HTML代碼以下：

/* 佩奇尾巴 泥腿子前端*/
.tail1{
   height: 20px;
   width: 18px;
   position: absolute;
   bottom: 114px;
   left: 279px;
   background-color: #4bdeff;
   border: 6px solid #ffd1e8;
   box-sizing: border-box;
   border-radius: 50% 50% 10% 50%;
   transform: rotate(35deg);
}
.tail2{
   height: 6px;
   width: 18px;
   position: absolute;
   bottom: 112px;
   left: 289px;
   background-color: #ffd1e8;
   border-radius: 0 0 150% 150% / 101% 0 150% 150%;
   transform: rotate(-15deg);
}
.tail3{
   height: 7px;
   width: 14px;
   position: absolute;
   bottom: 109px;
   left: 275px;
   background-color: #ffd1e8;
   border-bottom: 6px soild #ffd1e8;
   box-sizing: border-box;
   border-radius: 0 0 238% 211%;
   transform: rotate(-4deg);
}
.tail4{
   left: 266px;
   bottom: 112px;
   transform: rotate(47deg);
}
<!-- 佩奇尾巴 start 泥腿子前端-->
<div class="tail">
   <div class="tail1"></div>
   <div class="tail2"></div>
   <div class="tail3"></div>
   <div class="tail3 tail4"></div>
</div>
<!-- 佩奇尾巴 end 泥腿子前端-->複製代碼

不知道爲何每次貼代碼發表完都要從新調一下格式沒要否則全顯示在一行，因此整個源碼我放在了GitHub上了，連接爲：github.com/HailongJian…