欢迎大家到腾讯云+社区获取更多腾讯海量技术实践的干货~作者：姜志耕|腾讯TEG网络工程师我是Peige，呵呵，这是我弟弟George，嘎嘎，这是我妈妈，哦，这是我爸爸，哦~背景粉红猪小妹火了一段时间，其实我一开始很不屑.翻看以前的儿童动画，不管是开心果、鬼熊、小兔冰冰，还是小熊维尼，没过多久就很快沦陷了，回想起来也没有太多的沉淀。所以一开始让我看小猪佩奇的时候，我拒绝了，因为你不能让我看，所以我马上就看。首先，我想尝试一下。深入了解后，我发现，靠，世界上居然还有这么神奇的动画片！正如浙江人所说：你不喜欢小猪佩奇，那是因为你不懂。魔猪嘶鸣，任性踩泥坑。这可不是简单的猪，从此就被圈粉了。在淘宝上买了粉红猪小妹的贴纸，上面贴上了社会纹身，把电脑桌面壁纸换成了小猪佩奇的全家福，还买了粉红猪小妹公仔。不过真正给我的工作带来积极影响的还是无意中发现的piggypage调试方法。小猪佩奇调试法：在程序调试、调试或测试过程中，操作者耐心地向小猪佩奇解释程序每一行的作用，以激发灵感，发现矛盾。“我喜欢一个东西，而且这个东西可以和工作结合起来，这是一件很幸运的事情，小猪页面的调试方式给我带来了工作效率的提升和一整天的好心情。”——CristianoBottlejiang很多人自称是社会人和佩奇粉，但大多数都是路人粉。路人粉，就是路过，成为粉丝。例如，当我回家看到一个孩子在看小猪佩奇时，我就知道了。这里我给出三个大概可以用来判断是路人粉还是真粉的问题。1.让我从一个简单的开始。请说出小猪佩奇动画中的7个角色。本题考查对人物的基本理解。大多数人都能说出这六位小猪佩奇的名字，乔治弟弟、猪爸爸、猪妈妈、猪爷爷和猪奶奶。比如小马佩德罗、绵羊苏西、大象艾米丽、狗丹尼、猫坎迪、兔子丽贝卡。2.下面是一道选择题，下面哪句是粉红猪小妹的开场动画台词：是我爸爸，呵呵~B.我是佩奇，呵呵，这是我弟弟乔治，嘎嘎，这是我妈妈，呵呵，这是我爸爸，呵呵~C.你好，我是佩奇佩奇，呵呵，这个是我弟弟乔治，嘎嘎，这是我妈妈，呵呵，这是我爸爸，呵呵~D.我是佩奇，呵呵，这是我弟弟乔治，嘎嘎，这是我妈妈，呵呵，这是我爸爸，哦~真爱粉仔细观看动画，不要跳过开头，答案是B。3.难度较大的，请说出某集的完整剧情。其实这个问题对于真正看过粉红猪小妹的人来说是一个加分题，就看是否真的看过了。不得不承认，其实就以上三个问题，我只能算是路人粉！预研在腾讯视频上找到了《小猪佩奇》第四季纸飞机那一集11秒的画面作为画图模板。出于习惯，我水平翻转了x轴。观察这张图，我们可以发现，粉红猪小妹的构图基本上是各种曲线，比如抛物线、圆、椭圆、二次贝塞尔曲线。这里说的是“类”，是小猪佩奇构图的精髓，手绘风格，而不是标准的死板线条。前端技术选型，画图第一个想到的就是svg和canvas，不过画画好，网上还有在线编辑svg的工具，比较无聊，我也不会不认为佩奇会同意。所以想用纯css来做，比较有挑战性，因为画曲线不是css擅长的。难点是CSS不能直接画曲线。曲线救国的方法是border-radius。后来整幅画都围绕着这个属性展开。border-radius的使用通常直接指定一个具体的像素来控制圆角的大小，比如border-radius:5px;此外，您可以分别指定水平和垂直半径，以“/”分隔，并接受长度值或百分比。边界半径：5px；即边框半径：5px5px5px5px/5px5px5px5px。顺序为左上水平半径，右上，右下，左下，/，左上垂直半径，右上，右下，左下。画个猪头了解border-radius的用法后，就可以开始实战了。通过分割线段，猪头就拼凑起来了，如下图。同时注意层次层次，用白底和粉底交叉覆盖填充画面。难点在于头部大轮廓的border-radius参数设置。一般的作图步骤如下：画一个椭圆；调整border-radius参数；染色;调整角度；猪头轮廓样式代码：position:absolute;z-指数：100；框大小：边框框；宽度：300px；高度：200px；顶部：100px；左：100px；边界半径：92%50%50%50%/87%80%68%50%；边框：6px实心#ef96c2；背景色：#ffb3da；变换：旋转（30度）；它是通过图层蒙版实现的。其实五个肢体画到这里，border-radius的使用基本已经很熟练了，参数设置大概也都熟悉了，剩下的就是工作量的问题了。其余的合身同法画出，五官的摆放要特别注意比例和大小。例如，由于尺寸不合适，身体很容易变胖或变瘦。这里可以使用photoshop的尺子。同时使用拾色器获取Page各部分的颜色。接下来就是整体调试了，这对于我这种小鸡啄米这种画画水平的人来说是最难的。
