用HTML和CSS绘制佩奇：我不是佩奇
在这篇博客中，我将解析一个完全使用HTML和CSS绘制的佩奇(Pig)形象。这个项目展示了CSS的强大能力，仅用样式就能创造出复杂的图形，而不需要任何图片或JavaScript。
项目概述
这个名为"我不是佩奇"的项目是一个纯CSS绘制的卡通猪形象。整个图形由多个<div>元素组成，每个元素都通过精确的CSS定位和样式来构建猪的各个部分。
效果图展示：
结构分解
头部结构
- 主头部(
.pig_head) - 耳朵(
.ear_left,.ear_right) - 鼻子和鼻孔
- 眼睛(包括眼白、眼球和边框)
- 嘴巴(上中下三部分)
- 脸颊
身体结构
- 主体(
.pig_body_bottom) - 手部(左右各三部分)
- 脚部和鞋子
- 尾巴(多个部分组合)
装饰元素
- 阴影(
.pig_shadow)
整体源码：
<!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参数来修改猪的外观，创造属于自己的独特版本，快来试试吧！
相关文章：
用HTML和CSS绘制佩奇：我不是佩奇
在这篇博客中，我将解析一个完全使用HTML和CSS绘制的佩奇(Pig)形象。这个项目展示了CSS的强大能力，仅用样式就能创造出复杂的图形，而不需要任何图片或JavaScript。 项目概述 这个名为"我不是佩奇"的项目是一个纯CSS绘制的卡通猪形象…...
彩讯携Rich AICloud与一体机智算解决方案亮相中国移动云智算大会
2025年4月10日，2025中国移动云智算大会在苏州盛大开幕，本次大会以“由云向智 共绘算网新生态”为主题，与会嘉宾围绕算力展开重点探讨。 大会现场特设区域展出各参会单位的最新算力成果，作为中国移动重要合作伙伴，彩讯…...
BERT - 直接调用transformers.BertModel, BertTokenizerAPI不进行任何微调
本节代码将使用 transformers 库加载预训练的BERT模型和分词器（Tokenizer），并处理文本输入。 1. 加载预训练模型和分词器 from transformers import BertTokenizer, BertModelmodel_path "/Users/azen/Desktop/llm/models/bert-base-…...
安卓开发提示Android Gradle plugin错误
The project is using an incompatible version (AGP 8.9.1) of the Android Gradle plugin. Latest supported version is AGP 8.8.0-alpha05 See Android Studio & AGP compatibility options. 改模块级 build.gradle（如果有独立配置）：…...
声学测温度原理解释
已知声速，就可以得到温度。 不同温度下的胜诉不同。 25度的声速大约346m/s 绝对温度-273度 不同温度下的声速。 FPGA 通过测距雷达测温度，固定测量距离，或者可以测出当前距离。已知距离，然后雷达发出声波到接收到回波的时间&a…...
Cuto壁纸 2.6.9 | 解锁所有高清精选壁纸，无广告干扰
Cuto壁纸 App 提供丰富多样的壁纸选择，涵盖动物、风景、创意及游戏动漫等类型。支持分类查找与下载，用户可轻松将心仪壁纸设为手机背景，并享受软件内置的编辑功能调整尺寸。每天更新，确保用户总能找到新鲜、满意的壁纸。 大小&am…...
C语言 AI 通义灵码 VSCode插件安装与功能详解
在 C 语言开发领域，一款高效的编码助手能够显著提升开发效率和代码质量。 通义灵码，作为阿里云技术团队打造的智能编码助手，凭借其强大的功能，正逐渐成为 C 语言开发者的新宠。 本文将深入探讨通义灵码在 C 语言开发中的应用&am…...
二分查找5：852. 山脉数组的峰顶索引
链接：852. 山脉数组的峰顶索引 - 力扣（LeetCode） 题解： 事实证明，二分查找不局限于有序数组，非有序的数组也同样适用 二分查找主要思想在于二段性，即将数组分为两段。本体就可以将数组分为ar…...
1.2 测试设计阶段：打造高质量的测试用例
测试设计阶段：打造高质量的测试用例 摘要 本文详细介绍了软件测试流程中的测试设计阶段，包括测试用例设计、测试数据准备、测试环境搭建和测试方案设计等内容。通过本文，读者可以系统性地了解测试设计的方法和技巧，掌握如何高效…...
【模拟电路】稳压二极管/齐纳二极管
齐纳二极管也被称为稳压二极管，是一种特殊的二极管，其工作原理是利用PN结的反向击穿状态。在齐纳二极管中，当反向电压增加到一定程度，即达到齐纳二极管的击穿电压时，反向电流会急剧增加，但此时齐纳二极管的电压却基本保持不变。这种特性使得齐纳二极管可以作为稳压器或电…...
项目周期过长，如何拆分里程碑
应对项目周期过长，合理拆分里程碑需要做到：明确项目整体目标与阶段目标、合理进行任务细分与分组、设定阶段性里程碑节点、实施有效的进度跟踪与反馈机制、灵活进行里程碑调整。其中，明确项目整体目标与阶段目标尤为关键。这能够帮助团队在长…...
Java基础 - 泛型（常见用法）
文章目录 泛型类泛型方法泛型类派生子类示例 1：子类固定父类泛型类型（StringBox 继承自 Box<String>）示例 2：子类保留父类泛型类型（AdvancedBox<T> 继承自 Box<T>)示例 3：添加子类自己的…...
蓝桥杯刷题总结 + 应赛技巧
当各位小伙伴们看到这篇文章的时候想必蓝桥杯也快开赛了，那么本篇文章博主就来总结一下一些蓝桥杯的应赛技巧，那么依旧先来走个流程 那么接下来我们分成几个板块进行总结 首先是一些基本语法 编程语言的基本语法 首先是数组，在存数据的时候…...
希哈表的学习
#include <stdio.h> #include <stdlib.h> #include "uthash.h"typedef struct {int id; // 学号，作为keychar name[20]; // 姓名，作为valueUT_hash_handle hh; // 必须有这个字段 } Student;Student* studen…...
Qt之OpenGL使用Qt封装好的着色器和编译器
代码 #include "sunopengl.h"sunOpengl::sunOpengl(QWidget *parent) {}unsigned int VBO,VAO; float vertices[]{0.5f,0.5f,0.0f,0.5f,-0.5f,0.0f,-0.5f,-0.5f,0.0f,-0.5f,0.5f,0.0f };unsigned int indices[]{0,1,3,1,2,3, }; unsigned int EBO; sunOpengl::~sunO…...
备赛蓝桥杯-Python-考前突击
额，，离蓝桥杯开赛还有十个小时，最近因为考研复习节奏的问题，把蓝桥杯的优先级后置了，突然才想起来还有一个蓝桥杯呢。。 到目前为止python基本语法熟练了，再补充一些常用函数供明天考前再背背，算…...
零基础开始学习鸿蒙开发-智能家居APP离线版介绍
目录 1.我的小屋 2.查找设备 3.个人主页 前言 好久不发博文了，最近都忙于面试，忙于找工作，这段时间终于找到工作了。我对鸿蒙开发的激情依然没有减退，前几天做了一个鸿蒙的APP，现在给大家分享一下！ 具体…...
不再卡顿！如何根据使用需求挑选合适的电脑内存？
电脑运行内存多大合适？在选购或升级电脑时，除了关注处理器的速度、硬盘的容量之外，内存（RAM）的大小也是决定电脑性能的一个重要因素。但究竟电脑运行内存多大才合适呢？这篇文章将帮助你理解不同使用场景下适…...
华为云 云化数据中心 CloudDC | 架构分析与应用场景
云化数据中心 CloudDC 云化数据中心 (CloudDC)是一种满足传统DC客户云化转型诉求的产品，支持将客户持有服务器设备部署至华为云机房，通过外溢华为云的基础设施管理、云化网络、裸机纳管、确定性运维等能力，帮助客户DC快速云化转型。 云化数据…...
【射频仿真学习笔记】变压器参数的Mathematica计算以及ADS仿真建模
变压器模型理论分析 对于任意的无源电路或者等效电路，当画完原理图后，能否认为已经知道其中的两个节点？vin和vout之间的明确解析解 是否存在一个通用的算法，将这里的所有元素都变成了符号，使得这个算法本身就是一个函…...
Linux系统Docker部署开源在线协作笔记Trilium Notes与远程访问详细教程
今天和大家分享一款在 G 站获得了 26K的强大的开源在线协作笔记软件，Trilium Notes 的中文版如何在 Linux 环境使用 docker 本地部署，并结合 cpolar 内网穿透工具配置公网地址，轻松实现远程在线协作的详细教程。 Trilium Notes 是…...
C++基础精讲-01
1C概述 1.1初识C 发展历程： C 由本贾尼・斯特劳斯特卢普在 20 世纪 70 年代开发，它在 C 语言的基础上增加了面向对象编程的特性，最初被称为 “C with Classes”，后来逐渐发展成为独立的 C 语言。 语言特点 （1&#x…...
为什么Java不支持多继承？如何实现多继承？
一、前言 Java不支持多继承（一个类继承多个父类）主要出于文中设计考虑；核心目的是简化语言复杂性并避免潜在的歧义性问题。 二、直接原因：菱形继承/钻石继承问题（Diamond Problem） 假设存在如下继承关系&…...
E8流程多行明细行字符串用I分隔，赋值到主表
需求：明细行摘要字段赋值到主表隐藏字段，隐藏摘要字段在标题中显示 代码如下，代码中的获取字段名获取方式，自行转换成jQuery("#fieldid").val()替换。 //1:参数表单id 2:流程字段名 3:0代表主表，1代表明细…...
QML面试笔记--UI设计篇04交互控件
1. QML中常用交互控件 1.1. Button1.2. Slider1.3. ProgressBar1.4. TextField1.5. TextArea1.6. ComboBox1.7. CheckBox1.8. RadioButton1.9. Menu1.10. Dialog 1. QML中常用交互控件 在万物互联的智能时代，QML凭借其声明式语法和跨平台能力，…...
[特殊字符] Spring Boot 日志系统入门博客大纲（适合初学者）
一、前言 📌 为什么日志在项目中如此重要？ 在开发和维护一个后端系统时，日志就像程序运行时的“黑匣子”，帮我们记录系统的各种行为和异常。一份良好的日志，不仅能帮助我们快速定位问题，还能在以下场景中…...
【人工智能】AI大模型开发数学基础指南
目录 学习内容**1. 线性代数****2. 概率与统计****3. 微积分****4. 优化理论****5. 信息论****6. 数值计算****7. 离散数学****8. 统计学进阶****如何学习？****总结** 如何学习**1. 明确学习目标****2. 分阶段学习计划****阶段 1：夯实基础****阶段 2&…...
Express中间件(Middleware)详解：从零开始掌握(1)
1. 中间件是什么？ 想象中间件就像一个"加工流水线"，请求(Request)从进入服务器到返回响应(Response)的过程中，会经过一个个"工作站"进行处理。 简单定义：中间件是能够访问请求对象(req)、响应对象(res)和下…...
STM32单片机中EXTI的工作原理
目录 1. EXTI概述 2. EXTI的组成部分 3. 工作原理 3.1 引脚配置 3.2 中断触发条件 3.3 中断使能 3.4 中断处理 4. 使用示例 5. 注意事项 结论 在STM32单片机中，EXTI（外部中断）是一种用于处理外部事件的机制，能够提高对硬…...
现代工业测试的核心支柱：电机试验工作台？（北重机械厂家）
电机试验工作台是现代工业测试中的核心支柱之一。这种工作台通常用于对各种类型的电机进行性能测试、负载测试和耐久性测试。通过电机试验工作台，工程师可以评估电机的效率、功率输出、转速、扭矩、温度等关键参数，从而确保电机的设计符合要求࿰…...