绘制小猪佩奇的方法有很多。从前端的角度，可以在 canvas 中绘制，或者直接使用 css3 绘制。这里就练习最基本的CSS绘制小猪佩奇。

<!DOCTYPE html>
<html>
<head><title>用css画一个小猪佩奇</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>

这是绘制的小猪佩奇。

前端绘制小猪佩奇（CSS）相关推荐

  1. 记：css绘制小猪佩奇的项目及踩过的坑

    下面是我项目的代码和预览链接,觉得项目好看又实用的小伙伴,随手给个star, 您的star是我最大的动力!!! 项目源码 预览链接 移动端实现效果的展示,点击download下载观看 这一项目的主题的 ...

  2. Python|Python简介|安装Python解释器|运行|开发工具|Python之禅|turtle绘制五星红旗|绘制方块|绘制小猪佩奇|语言100课：学习（1）

    文章目录 源项目地址 初识Python Python简介 Python的历史 Python的优缺点 Python的应用领域 安装Python解释器 运行Python程序 确认Python的版本 编写P ...

  3. python turtle画熊-Python使用turtle库绘制小猪佩奇(实例代码)

    turtle(海龟)是Python重要的标准库之一,它能够进行基本的图形绘制.turtle图形绘制的概念诞生于1969年,成功应用于LOGO编程语言. turtle库绘制图形有一个基本框架:一个小海龟 ...

  4. 绘制小猪佩奇的python代码

    一个很有意思的代码,可以绘制出小猪佩奇,代码来源 github.com """ 绘制小猪佩奇 """ from turtle import ...

  5. python绘制小猪佩奇程序设计大作业_代码绘制一只小猪佩奇---python篇

    今天教大家用python的pillow包来绘制小猪佩奇,python的安装就不用多说了,直接上代码吧 0.首先当然是安装pillow包啦. 关于pillow库的安装有几种方式 最常使用的是pip安装 ...

  6. python turtle 绘图小猪佩奇,Python使用turtle库绘制小猪佩奇(实例代码)

    这篇文章主要介绍了Python使用turtle库绘制小猪佩奇,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 turtle(海龟)是Python重要的标准库之一,它 ...

  7. 趣味python | 一步一步绘制小猪佩奇

    微信公众号:Python 集中营 简单的事情重复做,重复的事情坚持做,坚持的事情用心做; 你的肯定是我坚持的动力,如果这篇文章对你有帮助,点个关注吧! 定义全局属性 1# 导入turtle绘图库23i ...

  8. python设置笔大小的函数_小朋友们，你试过用Python语言绘制小猪佩奇吗？来完成你的第一个创作吧！...

    在上一章中,我们用海龟绘图绘制了机器猫的卡通图像.在本章中,我们介绍如何用海龟绘图来绘制小朋友们喜欢的另一个卡通形象--小猪佩奇. 1 程序分析 我们先来看一下小猪佩奇的样子,如图1所示. 图1 观察 ...

  9. 用python画小猪佩奇的编码_如何用python绘制小猪佩奇-python绘图教程图文讲解

    原标题:如何用python绘制小猪佩奇-python绘图教程图文讲解 如何运用python来绘制小猪佩奇呢?通过几道简单的python代码即可让你绘制出小猪佩奇,话不多说,直接上代码. 用python ...

最新文章

  1. 分享一个自己用的Objective-C的Http接连类
  2. JS的深拷贝和浅拷贝
  3. What Does TTY Stand for in Linux?
  4. oracle文件大小的限制
  5. java string转number_Java运算符知识点总结
  6. 使用Java 9向Javadoc搜索添加术语
  7. windows和centos7实现文件共享之samba
  8. mysql分析函数的实现
  9. 正则表达式五分钟快速复习
  10. java 单例模式_谈谈Java中的单例模式
  11. 基于ASP.NETAJAX的WebPart开发与部署-转
  12. 每日一句20191229
  13. jclasslib插件_JClassLib
  14. 微型计算机的组装步骤,微型计算机系统装配教程
  15. c语言cm 英尺换算
  16. 【天光学术】社会语言学论文：委婉语合作原则违反的具体体现与影响（节选）
  17. 为知笔记数据备份方法
  18. 达人评测 i7 13700h和i7 13620h选哪个 酷睿i713700h和13620h对比
  19. 【Android】Android 集成商米内置打印机打印票据
  20. java基础 马士兵_马士兵java零基础

热门文章

  1. Opencv 笔记7 凸包算法-Graham扫描法
  2. 2021，OpenSquare回顾过去，展望未来
  3. React系统性学习(下)
  4. 使用记账软件，记录每笔消费和收入操作简单
  5. Java json字符串转json对象
  6. GIC介绍 （三）——GIC400 Register
  7. 数据集voc，coco注释格式，详情大全
  8. 移动网络能“接管”生活？2014十大猜想
  9. eclipes error
  10. Programming: Principles and Practice Using C++