首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  推广

用 CSS 画小猪佩奇,你就是下一个社会人!

  QcloudCommunity · 2018-05-18 10:15:10 +08:00 · 12169 次点击
这是一个创建于 514 天前的主题,其中的信息可能已经有所发展或是发生改变。

作者:江志耿 | 腾讯 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 参数设置。大体绘画步骤如下:

  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>

最后合体如下:

我是佩奇

跟模板比对一下~

哪个是真的佩奇

最后

演示效果猛戳这里哦! https://www.doverr.com/peppa.html

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~

121 回复  |  直到 2018-06-14 20:51:22 +08:00
1  2  
    101
codermagefox   2018-05-18 20:51:19 +08:00
@timwei #40 这个是真的牛逼,我曹
    102
lsido   2018-05-18 20:55:55 +08:00 via Android
腾讯 QQ 秀,你是真的秀🐷
    103
dobelee   2018-05-18 21:04:07 +08:00 via Android
给大佬递冰阔落
    104
chenlaocong   2018-05-18 21:07:38 +08:00 via Android
这个是真的秀
    105
molvqingtai   2018-05-18 21:21:32 +08:00 via Android
这尼玛,流弊!
    106
johnniang   2018-05-18 22:10:50 +08:00
在 firefox 下的 peppa 的嘴巴有问题哦
    107
oreoiot   2018-05-18 22:51:06 +08:00 via iPhone
我要这铜币有何用
    108
Rorysky   2018-05-18 23:13:22 +08:00
社会画家
    109
JvaScript   2018-05-18 23:28:11 +08:00 via Android
收下我的膝盖
    110
SoulGem   2018-05-19 00:35:41 +08:00 via iPhone
66666 这 CSS 真的服
    111
LZRng   2018-05-19 00:44:50 +08:00 via iPhone
我的第一个收藏
    112
FrankFang128   2018-05-19 00:48:11 +08:00
    113
chnhyg   2018-05-19 01:06:35 +08:00 via iPhone
    114
baskice   2018-05-19 08:49:09 +08:00
6666666666666
    115
frozenthrone   2018-05-19 08:54:58 +08:00 via iPhone
1024
    116
MMMit   2018-05-19 08:58:28 +08:00
社费啊,强
    117
qloog   2018-05-19 09:20:48 +08:00
2333
    118
zchlwj   2018-05-19 09:36:04 +08:00
@LeungJZ 可能他是实验小学,你是希望小学吧
    119
JenniferL   2018-05-19 16:24:44 +08:00
这是真的 6,妥妥的收藏收藏
    120
QcloudCommunity   2018-05-21 11:36:29 +08:00
@shakoon 像素佩奇
    121
xiangyuecn   2018-06-14 20:51:22 +08:00
doverr.com 证书过期了

2017 ‎年‎ 6 ‎月‎ 12 ‎日 8:00:00 到 ‎ 2018 ‎年‎ 6 ‎月‎ 13 ‎日 7:59:59
1  2  
关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3054 人在线   最高记录 5043   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.3 · 22ms · UTC 11:19 · PVG 19:19 · LAX 04:19 · JFK 07:19
♥ Do have faith in what you're doing.