【前端切圖】用css畫(huà)一個(gè)卡通形象-小豬佩奇

最近在騰訊云技術(shù)社區(qū)遇到了一位奇才，用css畫(huà)出了一個(gè)社會(huì)人小豬佩奇婆廊，不得不服。研究了一下他的文章https://segmentfault.com/a/1190000014909658巫橄，感覺(jué)甚是有趣淘邻，果斷收藏。
話(huà)不多說(shuō)湘换，直接貼一張生動(dòng)到一塌糊涂的圖列荔。

圖片.png

前端代碼如下：

<!DOCTYPE html>
<html>
<head>
    <title>用css畫(huà)一個(gè)小豬佩奇</title>
    <style type="text/css">

    div {
        position: absolute;
        transform-origin: left top;
    }
.pig_container {
    width: 800px;
    height: 800px;
    top: 0;
    left: 50px;
}

.pig_head {
    width: 300px;
    height: 200px;
    top: 100px;
    left: 100px;
    border-radius: 95% 50% 50% 50%/ 87% 80% 68% 50%;
    border: 6px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(30deg);
    z-index: 100;
    box-sizing: border-box;
}
.pig_head_white_left_bottom {
    width: 200px;
    height: 154px;
    bottom: -7px;
    left: -38px;
    background-color: #fff;
    box-sizing: border-box;
}
.pig_head_white_left_top {


    width: 200px;
    height: 66px;
    bottom: 84px;
    background-color: #ffb3da;
    box-sizing: border-box;
    top: 166px;
    left: 134px;
    transform: rotate(34deg);
    z-index: 103;
}
.left_eye, .right_eye, .face, .mouth {
    z-index: 104;
}
.pig_nose {
    width: 51px;
    height: 70px;
    top: 147px;
    left: 107px;
    border-radius: 72% 72% 72% 72%/ 72% 72% 72% 72%;
    border: 6px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(36deg);
    z-index: 103;
    box-sizing: border-box;
}
.pig_nose_bottom {
    width: 88px;
    height: 13px;
    top: 209px;
    left: 84px;
    border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
    border: 6px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(35deg);
    z-index: 102;
    box-sizing: border-box;
    border-top-color: #ffb3da;
}
.pig_jaw {
    width: 97px;
    height: 104px;
    top: 249px;
    left: 141px;
    border-radius: 0% 0% 0% 76%/ 0% 0% 0% 74%;
    border: 6px solid #ef96c2;
    background-color: #ffb3da;
    transform: rotate(22deg);
    z-index: 100;
    box-sizing: border-box;
    border-top-color: #ffb3da;
    border-right-color: #ffb3da;
}
.pig_jaw_right {
    width: 13px;
    height: 6px;
    background-color: #ef96c2;
    top: 373px;
    left: 186px;
    transform: rotate(19deg);
    z-index: 100;
}
.left_eye_bg {
    width: 29px;
    height: 29px;
    top: 177px;
    left: 170px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #fff;
    background-color: #fff;
    z-index: 101;
    box-sizing: border-box;
}
.left_eye_ball {
    width: 10px;
    height: 10px;
    top: 181px;
    left: 171px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #000;
    background-color: #000;
    z-index: 101;
    box-sizing: border-box;
}
.left_eye_border {
    width: 34px;
    height: 34px;
    top: 174px;
    left: 166px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #ef96c2;
    background-color: transparent;
    z-index: 101;
    box-sizing: border-box;
}

.right_eye_bg {
    width: 28px;
    height: 28px;
    top: 194px;
    left: 205px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #fff;
    background-color: #fff;
    z-index: 101;
    box-sizing: border-box;
}
.right_eye_ball {
    width: 10px;
    height: 10px;
    top: 199px;
    left: 208px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #000;
    background-color: #000;
    z-index: 101;
    box-sizing: border-box;
}
.right_eye_border {
    width: 35px;
    height: 37px;
    top: 191px;
    left: 202px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    border: 6px solid #ef96c2;
    background-color: transparent;
    z-index: 101;
    box-sizing: border-box;
}

.mouth_bottom {
    width: 97px;
    height: 45px;
    top: 273px;
    left: 154px;
    border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
    border: 6px solid #d44b81;
    background-color: #000;
    z-index: 101;
    box-sizing: border-box;
    transform: rotate(19deg);
}
.mouth_middle {
    width: 98px;
    height: 27px;
    top: 272px;
    left: 154px;
    border-radius: 0% 0% 50% 50%/ 0% 0% 100% 100%;
    border: 6px solid #d44b81;
    background-color: #ffb3da;
    z-index: 101;
    box-sizing: border-box;
    transform: rotate(19deg);
    border-top-color: #ffb3da;
}
.mouth_top {
        width: 135px;
    height: 66px;
    top: 231px;
    left: 149px;
    border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
    background-color: #ffb3da;
    z-index: 101;
    transform: rotate(13deg);


}
.face {
    width: 49px;
    height: 59px;
    top: 243px;
    left: 269px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    background-color: #ff96ce;
    transform: rotate(26deg);
}

.nose_kong_left {
    width: 12px;
    height: 12px;
    top: 179px;
    left: 93px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    background-color: #da6c9b;
    z-index: 104;
}
.nose_kong_right {
    width: 12px;
    height: 12px;
    top: 182px;
    left: 109px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    background-color: #da6c9b;
    z-index: 104;
}

.ear_left {
    width: 24px;
    height: 52px;
    top: 126px;
    left: 226px;
    border: 6px solid #ef96c2;
    border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;
    background-color: #ffb3da;
    z-index: 99;
    transform: rotate(18deg);
}
.ear_right {
    width: 24px;
    height: 52px;
    top: 150px;
    left: 280px;
    border: 6px solid #ef96c2;
    border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;
    background-color: #ffb3da;
    z-index: 99;
    transform: rotate(36deg);
}

.pig_body_bottom {
    width: 215px;
    height: 197px;
    top: 305px;
    left: 108px;
    border: 6px solid #e33b32;
    border-radius: 50% 50% 50% 50%/ 100% 100% 0% 0%;
    background-color: #eb5b50;
    z-index: 99;
}

.hand_left_middle {
    width: 78px;
    height: 12px;
    top: 432px;
    left: 63px;
    border-radius: 100% 100% 100% 17%/ 100% 90% 16% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(-35deg);
}
.hand_left_top {
    width: 28px;
    height: 9px;
    top: 415px;
    left: 63px;
    border-radius: 100% 100% 100% 35%/ 100% 90% 16% 90%;
    background-color: #ffbadf;
    z-index: 99;
}
.hand_left_bottom {
        width: 20px;
    height: 9px;
    top: 420px;
    left: 93px;
    border-radius: 60% 59% 65% 90%/ 100% 90% 89% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(98deg);
}

.hand_right_middle {
        width: 79px;
    height: 11px;
    top: 374px;
    left: 309px;
    border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(28deg);
}
.hand_right_top {
    width: 28px;
    height: 10px;
    top: 397px;
    left: 350px;
    border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(-7deg);
}
.hand_right_bottom {
    width: 28px;
    height: 11px;
    top: 395px;
    left: 356px;
    border-radius: 100% 100% 62% 17%/ 99% 92% 90% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(69deg);
}
.left_foot {
        width: 11px;
    height: 52px;
    top: 507px;
    left: 175px;
    border-radius: 100% 100% 100% 100%/ 50% 50% 21% 20%;
    background-color: #ffbadf;
    z-index: 99;
}
.left_shoes {
        width: 51px;
    height: 14px;
    top: 553px;
    left: 138px;
    border-radius: 58% 187% 180% 50%/ 130% 123% 113% 100%;
    background-color: #000;
    z-index: 99;
    transform: rotate(0deg);
}
.right_foot {
    left: 268px;
}
.right_shoes {
    left: 230px;
}
.pig_shadow {
    width: 240px;
    height: 47px;
    top: 535px;
    left: 101px;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    background-color: rgba(171, 171, 171, 0.7);
    transform: rotate(-1deg);
}
.tail_left {
    width: 19px;
    height: 8px;
    top: 472px;
    left: 330px;
    border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
    transform: rotate(-9deg);
    background-color: #ffbadf;
    z-index: 99;
}
.tail_left_blank {
    width: 30px;
    height: 15px;
    top: 466px;
    left: 332px;
    border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;
    transform: rotate(-36deg);
    background-color: #fff;
    z-index: 99;
}
.tail_right {
    width: 21px;
    height: 5px;
    top: 451px;
    left: 343px;
    border-radius: 0% 0% 51% 50%/ 0% 0% 100% 100%;
    transform: rotate(31deg);
    background-color: #fff;
    z-index: 99;
    border: 8px solid #ffbadf;
    border-top-color: #fff;
}
.tail_blank {
    width: 36px;
    height: 21px;
    top: 437px;
    left: 351px;
    transform: rotate(34deg);
    background-color: #fff;
    z-index: 99;
}
.tail_middle {
    width: 7px;
    height: 11px;
    top: 450px;
    left: 336px;
    border: 8px solid #ffbadf;
    border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
    background-color: #fff;
    z-index: 99;
}
.tail_circle {
    width: 17px;
    height: 8px;
    top: 475px;
    left: 358px;
    border-radius: 36% 37% 62% 63%/ 99% 92% 90% 90%;
    background-color: #ffbadf;
    z-index: 99;
    transform: rotate(-40deg);
}

    </style>
</head>
<body>

<div class="pig_container">
    <!-- 尾巴 -->
    <div class="tail_left"></div>
    <div class="tail_right"></div>
    <div class="tail_blank"></div>
    <div class="tail_middle"></div>
    <div class="tail_circle"></div>
    <!-- 底部陰影 -->
    <div class="pig_shadow"></div>
    <!-- 左腳 -->
    <div class="left_foot"></div>
    <div class="left_foot right_foot"></div>
    <!-- 左鞋 -->
    <div class="left_shoes"></div>
    <div class="left_shoes right_shoes"></div>
    <!-- 左手 -->
    <div>
        <div class="hand_left_top"></div>
        <div class="hand_left_bottom"></div>
        <div class="hand_left_middle"></div>
    </div>
    <!-- 身體 -->
    <div class="pig_body_bottom"></div>
    <!-- 右手 -->
    <div>
        <div class="hand_right_top"></div>
        <div class="hand_right_bottom"></div>
        <div class="hand_right_middle"></div>
    </div>

    <!-- 豬頭 -->
    <div>
        <!-- 耳朵 -->
        <div class="ear_left"></div>
        <div class="ear_right"></div>
        <div class="pig_head">
            <div class="pig_head_white_left_bottom"></div>
        </div>
            <div class="pig_head_white_left_top"></div>
        <!-- 鼻子 -->
        <div class="pig_nose"></div>
        <!-- 下巴 -->
        <div class="pig_jaw"></div>
        <div class="pig_jaw_right"></div>
        <div class="pig_nose_bottom"></div>
        <!-- 鼻孔 -->
        <div class="nose_kong_left"></div>
        <div class="nose_kong_right"></div>
        <!-- 左眼 -->
        <div class="left_eye">
            <div class="left_eye_bg"></div>
            <div class="left_eye_ball"></div>
            <div class="left_eye_border"></div>
        </div>
        <!-- 右眼 -->
        <div class="right_eye">
            <div class="right_eye_bg"></div>
            <div class="right_eye_ball"></div>
            <div class="right_eye_border"></div>
        </div>
        <!-- 嘴巴 -->
        <div class="mouth">
            <div class="mouth_bottom"></div>
            <div class="mouth_middle"></div>
            <div class="mouth_top"></div>
        </div>
        <!-- 臉頰 -->
        <div class="face"></div>
    </div>
</div>

</body>
</html>

參考鏈接：https://segmentfault.com/a/1190000014909658

原文作者：祈澈姑娘
技術(shù)博客：http://www.reibang.com/u/05f416aefbe1

90后前端妹子，愛(ài)編程枚尼，愛(ài)運(yùn)營(yíng)贴浙，愛(ài)折騰。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問(wèn)題署恍，堅(jiān)持記錄工作中所所思所見(jiàn)崎溃，歡迎大家一起探討交流。

最后編輯于：2018.05.18 14:01:13

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末盯质，一起剝皮案震驚了整個(gè)濱河市袁串，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌呼巷，老刑警劉巖囱修，帶你破解...
沈念sama閱讀 218,525評(píng)論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異王悍，居然都是意外死亡破镰，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,203評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)压储，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)鲜漩，“玉大人，你說(shuō)我怎么就攤上這事集惋≡兴疲” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 164,862評(píng)論 0贊 354
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵刮刑，是天一觀的道長(zhǎng)喉祭。經(jīng)常有香客問(wèn)我，道長(zhǎng)雷绢，這世上最難降的妖魔是什么泛烙？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,728評(píng)論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮习寸，結(jié)果婚禮上胶惰，老公的妹妹穿的比我還像新娘。我一直安慰自己霞溪，他們只是感情好孵滞，可當(dāng)我...
茶點(diǎn)故事閱讀 67,743評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著鸯匹，像睡著了一般坊饶。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上殴蓬，一...
開(kāi)封第一講書(shū)人閱讀 51,590評(píng)論 1贊 305
城市分裂傳說(shuō)
那天匿级，我揣著相機(jī)與錄音，去河邊找鬼染厅。笑死痘绎，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的肖粮。我是一名探鬼主播孤页，決...
沈念sama閱讀 40,330評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼涩馆！你這毒婦竟也來(lái)了行施？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 39,244評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤魂那，失蹤者是張志新（化名）和其女友劉穎蛾号，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體涯雅，經(jīng)...
沈念sama閱讀 45,693評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡鲜结，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,885評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了活逆。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片轻腺。...
茶點(diǎn)故事閱讀 40,001評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖划乖，靈堂內(nèi)的尸體忽然破棺而出贬养，到底是詐尸還是另有隱情，我是刑警寧澤琴庵，帶...
沈念sama閱讀 35,723評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布误算，位于F島的核電站，受9級(jí)特大地震影響迷殿，放射性物質(zhì)發(fā)生泄漏儿礼。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,343評(píng)論 3贊 330
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一庆寺、第九天我趴在偏房一處隱蔽的房頂上張望蚊夫。院中可真熱鬧，春花似錦懦尝、人聲如沸知纷。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 31,919評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)琅轧。三九已至伍绳，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間乍桂，已是汗流浹背冲杀。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,042評(píng)論 1贊 270
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留睹酌，地道東北人权谁。一個(gè)月前我還...
沈念sama閱讀 48,191評(píng)論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像憋沿，于是被迫代替她去往敵國(guó)和親旺芽。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,955評(píng)論 2贊 355