刚，

被《啥是佩奇》这支广告片刷屏了。

佩奇明明是个喜剧角色，

却看哭了所有人。

▼

《啥是佩奇》？？？

快过年了

在农村爷爷给城里的小孙子打电话

小孙子说想要“佩奇”

为了满足小孙子的愿望

爷爷开始满村子找佩奇

开片爷爷在电话这头的一段话就很抓人心，

全世界的爷爷都是这样疼孙儿的，

一下子就让观众有共情的心理。

一句“什么是佩奇？”

铺垫了爷爷接下来的一段寻找佩奇之路，

最后爷爷找到的佩奇骨络清奇，

却是圈主见过的全世界最可爱的小猪佩奇！

不知道大家看完什么感觉

反正我看完是哭了

我看网友们也纷纷留言

说自己哭笑两重奏

看着爷爷满村子找佩奇，我有点心疼了。为此我想用代码来告诉爷爷，啥是佩奇？

找了小猪佩奇的图片作为模板。

观察这个图像可以发现，小猪佩奇在构图基本是各种曲线，类抛物线、类圆、类椭圆、类二次贝塞尔曲线。这里说的都是“类”，这也正是小猪佩奇的构图精髓，一种手绘风格，而不是标准刻板的线条。在前端技术选型上，画图首先想到的是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 参数设置。大体绘画步骤如下：

1. 画椭圆；
2. 调 border-radius 参数；
3. 上色；
4. 调角度；
5. 图层遮盖补充。

猪头轮廓样式代码：

 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 的标尺。同时用取色器拿到佩奇各部分颜色。接下来就是整体的调试了，对我这种绘画处于小鸡啄米水平的人来说，这个才是最难的。

<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 class="pig_head_white_left_top"></div>
 </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>

最后合体如下：

跟模板比对一下~

哪个是真的佩奇？

为程序界都知道，最麻烦的还是跟人打交道，对于软件，跟人交互的地方都会十分麻烦，并不是说技术会复杂，只是要满足所有人的喜好和口味，就会比较麻烦。

前端就是这么一个职业，专门做跟用户直接打交道的页面，用到的语言繁杂，单是基础的就css，js，html。然后再加十几个框架，什么jQuery,Angularjs,easy UI 等等吧。

如果哪天想分享个代码，会不会很不方便，好不容易有个github了，还不能看界面。不能看界面那怎么能突显前端的高大上?

我希望的是，首先免费，然后可以分享代码，在线编辑代码，编辑完一键分享，别人打开就能看到我所有的代码和界面效果，然后最好在加一个文章说明，或者是评论。

小编今天就发现这么一个免费的分享网站，简直不是一般的好用。

提前声明，我可不是给他打广告，只是觉得好东西就要分享，好代码就要开源。也许会给正在开发的你提供一个很好的分享自己idea的途径呢。

上图：

打开是这样的，runjs，四个模块，左上写html，左下写js代码，右上写css，右下是预览。界面风格跟webStorm想似。可以黑白两种色互换。简直跟本地的idea一样。

可以只打开html代码全屏编辑。

也可以只打开js代码，全屏编辑。

同样可以全屏编辑css代码。

也可以这样，左右两个屏编写，就跟平时用的idea一样。

或是这样

运行效果，其实是可以动的，我比较懒都没截一个动态图。凑乎看吧，想想自己的写的炫酷特效，放在这里，一个链接就能给大家看到。直接演示，挺好吧。

最好用的是这里，前端是个麻烦的活，因为：框架太多，多的不知道该用什么好。我是后端程序员，偶尔会顶一下前端的空缺，写几行前端代码。所以深深同情前端开发者。下边这张图就基本涵盖了所有常用的框架了。而且支持最新的h5，angularjs等等。

当然，编码没有快捷键怎么行，F1看帮助文档，是个弹窗。

别问我是怎么知道的，去国外论坛看大神们的代码，然后链接就是分享在这，代码，效果，演示一次性都看到了，分分钟学会编程思路，问题迎刃而解。看到好的东西我就喜欢分享一下，最后附带网站链接：http://runjs.cn/code

加油吧，薪资马上再涨一万。大神记得分享你的代码哦，为全人类开源。喜欢的给个赞。我去写代码了，不废话了。