知乎高赞答案!你看过/写过哪些有意思的代码?

用CSS画小猪佩奇你见过吗?来看看,你就是下一个社会人!

作者/江志耿 腾讯TEG网络工程师

我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~

背景

小猪佩奇已经火了好一阵了,其实一开始我是不屑的。纵观小朋友的历届动画,无论喜洋洋、熊出没还是小兔兵兵、小熊维尼,火过一阵便迅速陨落,回想起来也没多少沉淀的东西。所以一开始让我看小猪佩奇的时候我是拒绝的,因为你不能让我看,我就马上去看,第一我要试一下。深入了解之后发现,卧槽,世间竟有如此出尘绝艳的动画片!正如某个浙江人说过:你不喜欢小猪佩奇那是因为你不了解。

魔性的猪叫声,任性的踩泥坑。这不是一只简单的猪,从此路转粉。我在淘宝买了小猪佩奇贴纸贴上了社会人纹身、电脑桌面壁纸换上了佩奇全家福、买了小猪佩奇公仔。但真正给我工作上带来积极作用的是我偶然发掘出来的小猪佩奇调试法。

小猪佩奇调试法:在程序的调试、除错或测试过程中,操作人耐心地向小猪佩奇解释每一行程序的作用,以此来激发灵感与发现矛盾。

小猪佩奇调试法

“喜欢一个事情,而这个事情又正好能与工作结合,这是非常幸运的事情。小猪佩奇调试法给我带来了工作效率的提升,也带来了全天的好心情。”

 —— Cristiano Bottlejiang

很多人号称自己是社会人是佩奇粉,其实大部分都是路人粉。

路人粉就是说路过认识成为了粉丝,就比如我回家看到小孩子在看小猪佩奇而知道了这个事。

这里我举三个问题大概可以用来判断是路人粉还是真爱粉。

再来个难的,请说出某一集的完整剧情。

其实这道题对于真正看了小猪佩奇的人来说是送分题,就看是不是真的看了。

我必须承认,其实就上面三个问题来答,我只能算路人粉了!

预研

找了腾讯视频上面小猪佩奇第四季纸飞机一集11秒处的画面作为绘画模板。出于习惯,我做了一个x轴的水平翻转。

绘画模版

椭圆

曲线

猪头

了解了 border-radius 的用法之后就可以开始实战了。通过对线条的分段,猪头如下图拼凑而成,同时要注意图层的层级,以及用白色背景和粉色背景来交叉覆盖填补画面。难的在于头部大轮廓的 border-radius 参数设置。大体绘画步骤如下:

  • 画椭圆;
  • 调 border-radius 参数;
  • 上色;
  • 调角度;
  • 图层遮盖补充。

猪头

猪头轮廓样式代码:

嘴巴

三个半椭圆依次叠加即可~同样是图层遮盖来实现。

嘴巴

五肢

其实画到这里基本上对 border-radius 的使用很熟练了,参数的设置也大概心中有数,剩下的也就工作量的问题了。

肢体

合体

其余的部分画法大同小异,五官的摆放要特别注意比例和尺寸,比如身体就很容易因为大小不合适而成了胖佩奇/瘦佩奇,这里可以借助 photoshop 的标尺。同时用取色器拿到佩奇各部分颜色。接下来就是整体的调试了,对我这种绘画处于小鸡啄米水平的人来说,这个才是最难的。

最后合体如下:

我是佩奇

跟模板比对一下~

哪个是真的佩奇?

· 最后

做需求去了,再见。:)

原文发布于微信公众号 - 腾讯大讲堂(TX_DJT)

原文发表时间:2018-07-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Data Analysis & Viz

手把手教你完成一个数据科学小项目(8):Emoji提取与分布图谱

请先阅读“中国年轻人正带领国家走向危机”,这锅背是不背? 一文,以对“手把手教你完成一个数据科学小项目”系列有个全局性的了解。

2322
来自专栏书山有路勤为径

SPINNING单车你需要知道的一些事(一)单车怎么调整

• If toe cages and straps are used, be sure to align the ball of your foot over ...

651
来自专栏Python绿色通道

数据可视化 | 2018年北上广深空气质量分析

92.5是年均AQI值,从上面科普知识里可以知道,2017年天津整体空气质量只能是「良」中的下下等水平,与轻度污染近在咫尺。

1712
来自专栏后端技术探索

程序员过生日,机智方式点蜡烛

1. 小区新搬来一户人家,一个30岁左右的年轻女人,带着一个4岁的男孩。每天独自一人操持家务,买菜做饭,接送孩子。时间久了,邻居们都有些议论,直到有一天,一个男...

671
来自专栏编程直播室

微风2005一、主翼主要规格二、主要数据打造一台适合初学者使用的练习机「微风2005」锥形翼製作过程

1845
来自专栏机器人网

伺服电机,步进电机,同步电动机和异步电动机的区别

同步电动机与异步电动机 原理: 同步电机就是靠励磁电流运行的,如果没有励磁,电机就是异步的。励磁是加在转子上的直流系统,它的旋转速度和极性与定子是一致的...

6337
来自专栏GIS讲堂

Arcgis for javascript实现百度地图ABCD marker的效果

在我的博客中,有一篇相关的文章,这段时间,有很多人问我求源码,只是时间过去已长,源代码已找不到,乘着这个9.3放假,又重新实现了下,并相关代码做了优化,在此贴出...

1192
来自专栏机器人网

什么是伺服电机,伺服电机知识汇总

“伺服”一词源于希腊语“奴隶”的意思。“伺服电机”可以理解为绝对服从控制信号指挥的电机:在控制信号发出之前,转子静止不动;当控制信号发出时,转子立即转动;当控制...

36910
来自专栏java一日一条

每个程序员和设计师必做的10项运动

防止肌肉和颈部麻痹的基本伸展动作。这套舒展动作不但有助于保持体型,还能修复突出的颈椎。

582
来自专栏机器人网

史上最全汽车图解,老司机也未必认得完 (收藏版)

这份史上最全汽车各部件图解,非常值得收藏!就算是老师傅,有很多部件的名字你肯定听说过但不一定都知道在哪个位置吧。 ? 打开发动机盖,就是这个样子了,4A13...

2958

扫码关注云+社区