摘要：所以一开始让我看小猪佩奇的时候我是拒绝的，因为你不能让我看，我就马上去看，第一我要试一下。其实这道题对于真正看了小猪佩奇的人来说是送分题，就看是不是真的看了。这里说的都是类，这也正是小猪佩奇的构图精髓，一种手绘风格，而不是标准刻板的线条。
欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~
作者：江志耿 | 腾讯TEG网络工程师
我是佩奇，哼，这是我的弟弟乔治，呱呱，这是我的妈妈，嚯，这是我的爸爸，嚯~
背景小猪佩奇已经火了好一阵了，其实一开始我是不屑的。纵观小朋友的历届动画，无论喜洋洋、熊出没还是小兔兵兵、小熊维尼，火过一阵便迅速陨落，回想起来也没多少沉淀的东西。所以一开始让我看小猪佩奇的时候我是拒绝的，因为你不能让我看，我就马上去看，第一我要试一下。深入了解之后发现，卧槽，世间竟有如此出尘绝艳的动画片！正如某个浙江人说过：你不喜欢小猪佩奇那是因为你不了解。
魔性的猪叫声，任性的踩泥坑。这不是一只简单的猪，从此路转粉。我在淘宝买了小猪佩奇贴纸贴上了社会人纹身、电脑桌面壁纸换上了佩奇全家福、买了小猪佩奇公仔。但真正给我工作上带来积极作用的是我偶然发掘出来的小猪佩奇调试法。
小猪佩奇调试法：在程序的调试、除错或测试过程中，操作人耐心地向小猪佩奇解释每一行程序的作用，以此来激发灵感与发现矛盾。
“喜欢一个事情，而这个事情又正好能与工作结合，这是非常幸运的事情。小猪佩奇调试法给我带来了工作效率的提升，也带来了全天的好心情。” —— Cristiano Bottlejiang
很多人号称自己是社会人是佩奇粉，其实大部分都是路人粉。路人粉就是说路过认识成为了粉丝，就比如我回家看到小孩子在看小猪佩奇而知道了这个事。这里我举三个问题大概可以用来判断是路人粉还是真爱粉。
1.先来个简单的，请说出小猪佩奇动画中的7个角色。
这个问题考察的是人物的基本认识，大部分人都能说出小猪佩奇、弟弟乔治、猪爸爸、猪妈妈、猪爷爷、猪奶奶这六个，所以说出第7个才算过关，比如小马佩德罗，小羊苏西，小象艾米丽，小狗丹尼，小猫坎迪，小兔瑞贝卡。
2.来个选择题，以下哪一句是小猪佩奇的开场动画台词：
A. 你好我是小猪佩奇，哼，这是我的弟弟乔治，呱呱，这是我的妈妈，嚯，这是我的爸爸，嚯~
B. 我是佩奇，哼，这是我的弟弟乔治，呱呱，这是我的妈妈，嚯，这是我的爸爸，嚯~
C. 你好我是小猪佩奇，哼，这是我的弟弟乔治，呱呱，这是我的妈妈，哼，这是我的爸爸，嚯~
D. 我是佩奇，哼，这是我的弟弟乔治，呱呱，这是我的妈妈，哼，这是我的爸爸，嚯~
真爱粉是连开头动画都不会跳过而认真看的，答案是B。
3.来个难的，请说出某一集的完整剧情。
其实这道题对于真正看了小猪佩奇的人来说是送分题，就看是不是真的看了。
我必须承认，其实就上面三个问题来答，我只能算路人粉了！
预研找了腾讯视频上面小猪佩奇第四季纸飞机一集11秒处的画面作为绘画模板。出于习惯，我做了一个x轴的水平翻转。
观察这个图像可以发现，小猪佩奇在构图基本是各种曲线，类抛物线、类圆、类椭圆、类二次贝塞尔曲线。这里说的都是“类”，这也正是小猪佩奇的构图精髓，一种手绘风格，而不是标准刻板的线条。在前端技术选型上，画图首先想到的是svg、canvas，但它们本身就擅长画图，而且网上都有在线编辑svg的工具，这就没意思了，我想佩奇也不会答应的。于是我想用纯粹的css来做，这样更有挑战，因为画图画曲线不是css擅长的事情。
难点CSS是没法直接画曲线的，曲线救国的办法就是 border-radius。后面整个绘画都是围绕这个属性展开。
border-radius 的使用通常直接定一个具体像素去控制圆角的大小，比如border-radius:5px;此外可以多带带指定水平和垂直半径，通过“/”分隔，接受长度值或百分比。border-radius:5px; 即border-radius: 5px 5px 5px 5px/ 5px 5px 5px 5px。依次是左上水平半径，右上，右下，左下，/，左上垂直半径，右上，右下，左下。
画 猪头了解了 border-radius 的用法之后就可以开始实战了。通过对线条的分段，猪头如下图拼凑而成，同时要注意图层的层级，以及用白色背景和粉色背景来交叉覆盖填补画面。难的在于头部大轮廓的 border-radius 参数设置。大体绘画步骤如下：
画椭圆；
调 border-radius 参数；
上色；
调角度；
图层遮盖补充。
猪头轮廓样式代码：
position: absolute;
z-index: 100;
box-sizing: border-box;
width: 300px;
height: 200px;
top: 100px;
left: 100px;
border-radius: 92% 50% 50% 50%/ 87% 80% 68% 50%;
border: 6px solid #ef96c2;
background-color: #ffb3da;
transform: rotate(30deg);
transform-origin: left top;
嘴巴
三个半椭圆依次叠加即可~同样是图层遮盖来实现。
五肢其实画到这里基本上对 border-radius 的使用很熟练了，参数的设置也大概心中有数，剩下的也就工作量的问题了。
合体其余的部分画法大同小异，五官的摆放要特别注意比例和尺寸，比如身体就很容易因为大小不合适而成了胖佩奇/瘦佩奇，这里可以借助 photoshop 的标尺。同时用取色器拿到佩奇各部分颜色。接下来就是整体的调试了，对我这种绘画处于小鸡啄米水平的人来说，这个才是最难的。
最后合体如下：
跟模板比对一下~
哪个是真的佩奇？
最后演示效果猛戳这里哦！https://www.doverr.com/peppa....
问答
如何验证CSS颜色名称？
相关阅读
CSS3动画-抛物线运动
CSS实战训练之图片点击放大
9个独特的 CSS 背景视觉效果
此文已由作者授权腾讯云+社区发布，原文链接：https://cloud.tencent.com/dev...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113294.html
摘要：主要有以下几个步骤找一张小猪乔治的图片参考对图片中的部分进行分解，并逐一实现废话其实掌握了后，这些步骤都不难了，细心绘制就可以完成啦。我绘制的小猪乔治如图参考资料用画小猪佩奇，你就是下一个社会人 概述 之前看了一篇关于用CSS来画小猪佩奇的文章，抱着锻炼自己的心态造了个轮子，画了个佩奇的小弟乔治，效果可以看这里，源码在这里。 开发过程中也让我对border-radius这个属性有了更深...
摘要：每天一个社会人实现效果想法之前看到一篇博客，使用绘制出了小猪佩奇，所以自己想试一试，采用纯绘制出低配版的小猪佩奇。在布局上，没有坚持嵌套，导致缩放时位置错位，如果想实行缩放一致，可采用小猪的头部嵌套布局实现。 每天一个CSS-社会人 实现效果 showImg(https://segmentfault.com/img/remote/1460000016461611?w=667&h=620...
摘要：于是乎，我建立了这个项目，收录一些有趣的小程序，便于阅读和思考。下面是一些列举一些有趣的内容这是来自编程从入门到实践中的一个小游戏。用语言实现的编译器。做的小博客，持续开发中这个项目还在不断丰富中，如果你有什么有趣的分享，欢迎联系我。 纸上得来终觉浅，绝知此事要躬行。 这本书或这个视频看完了，我可以做点什么？编程难道只是命令行打印些东西？该找点什么适合练手的项目来练习练习呢？ 我想可能...
摘要：它指向构造函数的原型对象这是原型对象上的一个指向构造函数的属性。先看代码的构造函数创建一个的实例，小猪佩奇敲黑板，划重点，理解这一句整个问题的关键，请多重复几遍。也就是说小猪佩奇的原型，就是从继承来的写成代码就是这个样子。 没错，我就是标题党！你已经成功被我骗进来了。来都来了，那就聊聊再走呗！接下来就听我一本正经地跟你说道说道。 Javascript的原型是这门语言的一个重点和...
摘要：变量用的好或不好，和代码质量有着非常重要的联系。简而言之，匈牙利命名法就是把变量的类型缩写，放到变量名的最前面。很多情况下，使用匈牙利命名法是个不错的主意，因为它可以改善你的代码可读性，尤其在那些变量众多同一类型多次出现时。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由鹅厂优文发表于云+社区专栏作者：朱雷 | 腾讯IEG高级工程师 『Python 工匠』是什么？...
阅读 1433·2021-11-22 15:33
阅读 1573·2021-11-15 18:01
阅读 444·2021-10-09 09:43
阅读 2332·2021-09-22 16:03
阅读 550·2021-09-03 10:28
阅读 3347·2021-08-11 10:22
阅读 2499·2019-08-30 15:54
阅读 1657·2019-08-30 14:21
