人才啊 鹅厂程序猿居然用CSS画出小猪佩奇
消息来源:baojiabao.com 作者: 发布时间:2024-05-15
作者:江志耿 | 腾讯TEG网络工程师
我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~
▌背景
小猪佩奇已经火了好一阵了,其实一开始我是不屑的。纵观小朋友的历届动画,无论喜洋洋、熊出没还是小兔兵兵、小熊维尼,火过一阵便迅速陨落,回想起来也没多少沉淀的东西。所以一开始让我看小猪佩奇的时候我是拒绝的,因为你不能让我看,我就马上去看,第一我要试一下。深入了解之后发现,卧槽,世间竟有如此出尘绝艳的动画片!正如某个浙江人说过:你不喜欢小猪佩奇那是因为你不了解。
魔性的猪叫声,任性的踩泥坑。这不是一只简单的猪,从此路转粉。我在淘宝买了小猪佩奇贴纸贴上了社会人纹身、电脑桌面壁纸换上了佩奇全家福、买了小猪佩奇公仔。但真正给我工作上带来积极作用的是我偶然发掘出来的小猪佩奇调试法。
壁纸
小猪佩奇调试法:在程序的调试、除错或测试过程中,操作人耐心地向小猪佩奇解释每一行程序的作用,以此来激发灵感与发现矛盾。
小猪佩奇调试法
“喜欢一个事情,而这个事情又正好能与工作结合,这是非常幸运的事情。小猪佩奇调试法给我带来了工作效率的提升,也带来了全天的好心情。” —— Cristiano Bottlejiang
很多人号称自己是社会人是佩奇粉,其实大部分都是路人粉。路人粉就是说路过认识成为了粉丝,就比如我回家看到小孩子在看小猪佩奇而知道了这个事。这里我举三个问题大概可以用来判断是路人粉还是真爱粉。
先来个简单的,请说出小猪佩奇动画中的7个角色。这个问题考察的是人物的基本认识,大部分人都能说出小猪佩奇、弟弟乔治、猪爸爸、猪妈妈、猪爷爷、猪奶奶这六个,所以说出第7个才算过关,比如小马佩德罗,小羊苏西,小象艾米丽,小狗丹尼,小猫坎迪,小兔瑞贝卡。
来个选择题,以下哪一句是小猪佩奇的开场动画台词:A. 你好我是小猪佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~B. 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~C. 你好我是小猪佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,哼,这是我的爸爸,嚯~D. 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,哼,这是我的爸爸,嚯~真爱粉是连开头动画都不会跳过而认真看的,答案是B。
来个难的,请说出某一集的完整剧情。其实这道题对于真正看了小猪佩奇的人来说是送分题,就看是不是真的看了。
我必须承认,其实就上面三个问题来答,我只能算路人粉了!
▌预研
找了腾讯视频上面小猪佩奇第四季纸飞机一集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 的标尺。同时用取色器拿到佩奇各部分颜色。接下来就是整体的调试了,对我这种绘画处于小鸡啄米水平的人来说,这个才是最难的。
最后合体如下:
我是佩奇
跟模板比对一下~
那个是真的佩奇
最后
相关文章
- 中兴受美国制裁事件 被罚了20亿美元过程事件始末 中兴被制裁后公司现状
2023-11-02 22:12:46
- B站怎么炸崩了哔哩哔哩服务器今日怎么又炸挂了?技术团队公开早先原因
2023-03-06 19:05:55
- 苹果iPhoneXS/XR手机电池容量续航最强?答案揭晓
2023-02-19 15:09:54
- 华为荣耀两款机型起内讧:荣耀Play官方价格同价同配该如何选?
2023-02-17 23:21:27
- google谷歌原生系统Pixel3 XL/4/5/6 pro手机价格:刘海屏设计顶配版曾卖6900元
2023-02-17 18:58:09
- 科大讯飞同传同声翻译软件造假 浮夸不能只罚酒三杯
2023-02-17 18:46:15
- 华为mate20pro系列手机首发上市日期价格,屏幕和电池参数配置对比
2023-02-17 18:42:49
- 小米MAX4手机上市日期首发价格 骁龙720打造大屏标准
2023-02-17 18:37:22
- 武汉弘芯遣散!结局是总投资1280亿项目烂尾 光刻机抵押换钱
2023-02-16 15:53:18
- 谷歌GoogleDrive网云盘下载改名“GoogleOne” 容量提升价格优惠
2023-02-16 13:34:45
- 巴斯夫将裁员6000人 众化工巨头裁员潮再度引发关注
2023-02-13 16:49:06
- 人手不足 韵达快递客服回应大量包裹派送异常没有收到
2023-02-07 15:25:20
- 资本微念与李子柒销声匿迹谁赢? 微念公司退出子柒文化股东
2023-02-02 09:24:38
- 三星GalaxyS8 S9 S10系统恢复出厂设置一直卡在正在检查更新怎么办
2023-01-24 10:10:02
- 华为Mate50 RS保时捷最新款顶级手机2022多少钱?1.2万元售价外观图片吊打iPhone14
2023-01-06 20:27:09
- 芯片常见的CPU芯片封装方式 QFP和QFN封装的区别?
2022-12-02 17:25:17
- 华为暂缓招聘停止社招了吗?官方回应来了
2022-11-19 11:53:50
- 热血江湖手游:长枪铁甲 刚猛热血 正派枪客全攻略技能介绍大全
2022-11-16 16:59:09
- 东京把玩了尼康微单相机Z7 尼康Z7现在卖多少钱?
2022-10-22 15:21:55
- 苹果iPhone手机灵动岛大热:安卓灵动岛App应用下载安装量超100万次
2022-10-03 22:13:45