用HTML和CSS绘制佩奇：我不是佩奇

在这篇博客中，我将解析一个完全使用HTML和CSS绘制的佩奇(Pig)形象。这个项目展示了CSS的强大能力，仅用样式就能创造出复杂的图形，而不需要任何图片或JavaScript。

项目概述

这个名为"我不是佩奇"的项目是一个纯CSS绘制的卡通猪形象。整个图形由多个<div>元素组成，每个元素都通过精确的CSS定位和样式来构建猪的各个部分。

效果图展示：

结构分解

头部结构

主头部(.pig_head)
耳朵(.ear_left, .ear_right)
鼻子和鼻孔
眼睛(包括眼白、眼球和边框)
嘴巴(上中下三部分)
脸颊

身体结构

主体(.pig_body_bottom)
手部(左右各三部分)
脚部和鞋子
尾巴(多个部分组合)

装饰元素

阴影(.pig_shadow)

整体源码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我不是佩奇</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>
<h1 align="center">我不是佩奇</h1>
<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>

总结

这个项目展示了CSS在图形创作中的强大能力。通过精心计算的位置、变形和层次控制，仅用CSS就创造出了一个生动的卡通形象。这种技术可以应用于：

图标设计
简单的游戏角色
品牌形象展示
网页装饰元素

虽然这种实现方式在性能上可能不如SVG高效，但它是一个很好的CSS练习，展示了CSS的可能性边界。

你可以通过调整各种CSS参数来修改猪的外观，创造属于自己的独特版本，快来试试吧！