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

 

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

作者:江志耿 | 腾讯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

问答

相关阅读

CSS3动画-抛物线运动

CSS实战训练之图片点击放大

9个独特的 CSS 背景视觉效果

此文已由作者授权腾讯云+社区发布,原文链接:https://cloud.tencent.com/developer/article/1128472?fromSource=waitui

海量技术实践经验,尽在云加社区! https://cloud.tencent.com/developer

js将“I am a coder”反转成 “coder a am I”,不许用split,join,subString,reverse;求解方法三

回答3浏览627

// 方法一 正则

function reverse(str){

var reg = /\w+/g;

var arr = str.match(reg);

var str = "";

var len = arr.length;

for(var i=len-1;i>0;i++){

str = str+arr[i]+" ";

}

str+=arr[0];

return str;

}

// 方法二 递减循环遍历

String.prototype.split = String.prototype.split || function(target){

var arr = [];

var temp = "";

for (var i=0;i<this.length;i++) {

var ch = this.charAt(i);

if(ch == target){

arr.push(temp);

temp = "";

}else{

temp += ch;

}

}

arr.push(temp);

return arr;

}

function reverse(str){

var arr = str.split(" ");

var newStr = ""

var len = arr.length;

for(var i=len-1;i>0;i++){

newStr = newStr+arr[i]+" ";

}

newStr+=arr[0];

return newStr;

}

添加回答

 
3回答

var btn ="I am a coder";
        var a = btn.match(/\w+\s/g),
        b = btn.match(/\s\w+/g);
        console.log(b[b.length - 1]+" "+ a[b.length - 1] + a[b.length - 2] + a[b.length - 3]);

1 反对 1个回复2017-03-06
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//还是用的正则,如果要追求效率的话直接用split(' ').reverse().join(' ')不就好了么...
 
function reverse(str) {
    var re = /\b\w+\b/g;
    var matches;
     
    return function(tempStr) {
        return (matches = re.exec(str)) !== null ? arguments.callee(matches + ' ' + tempStr) : tempStr.replace(/\s$/,'');
    }('');
}
 
var result = reverse('I am a coder');
 
console.log(result);
 反对 0个回复2017-03-06

方法三

var btn = " I am a coder ",
              str = "",
              arr = [];
        for (var i = 0; i < btn.length; i++) {
            var data = btn[i];
            if (data != " ") {
                str += data;
                if (i != btn.length - 1) {
                    continue;
                }
            }
            if (str != "") {
                arr.push(str);
                str = "";
            }
        }
        var s=""
        for (var i = arr.length - 1, arr2; arr2 = arr[i--];) {
            s += arr2+" ";
        }
        console.log(s);

用CSS画小猪佩奇,你就是下一个社会人! js将“I am a coder”反转成 “coder a am I”,不许用split,join,subString,reverse;求解方法三的更多相关文章

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

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 背景 小猪佩奇已经火了好 ...

  2. *【Python】【demo实验31】【练习实例】【使用turtle画小猪佩奇】

    如下图小猪佩奇: 要求使用turtle画小猪佩奇: 源码: # encoding=utf-8 # -*- coding: UTF-8 -*- # 使用turtle画小猪佩奇 from turtle i ...

  3. SNF快速开发平台MVC-审核流,审核完成后会给下一个审核人发邮件,下一个审核人可以不登录系统,在邮件里进行审核处理

    审核流设计和使用参考以下资料: 审核流设计 http://www.cnblogs.com/spring_wang/p/4874531.html 审核流实例 http://www.cnblogs.com ...

  4. python 画小猪佩奇

    转自:python画个小猪佩奇 # -*- coding: utf-8 -*- """ Created on Mon May 20 11:36:03 2019 @auth ...

  5. 使用canvas 代码画小猪佩奇

    最近不是小猪佩奇很火嘛!!! 前几天 在知乎 看见了别人大佬用python写的 小猪佩奇,  顿时想学 ,可是 自己 没学过python(自己就好爬爬图片,,,,几个月没用 又丢了) 然后 就想画一个 ...

  6. 用python画小猪佩奇(非原创)

    略作改动: # coding:utf-8 import turtle as t t.screensize(400, 300, "blue") t.pensize(4) # 设置画笔 ...

  7. python 用turtle 画小猪佩奇

    from turtle import * def nose(x,y):#鼻子 penup()#提起笔 goto(x,y)#定位 pendown()#落笔,开始画 setheading(-30)#将乌龟 ...

  8. 利用python画小猪佩奇

    import turtle as t t.pensize(4) t.hideturtle() t.colormode(255) t.color((255,155,192),"pink&quo ...

  9. 【前端切图】用css画一个卡通形象-小猪佩奇

    最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

随机推荐

  1. Java中的类加载器--Class loader

    学习一下Java中的类加载器,这个是比较底层的东西,好好学习.理解一下.  一.类加载器的介绍 1.类加载器:就是加载类的工具,在java程序中用到一个类,java虚拟机首先要把这个类的字节码加载到内 ...

  2. 离散数学-集合的交并差集运算--STL-set类

    代码其实很简单,我们只需要知道set类的使用方法就可以了,比如迭代器的定义( set<T>::iterator it=a.begin() ),和简单的insert函数插入,以及find函数 ...

  3. Properties类操作.properties配置文件方法总结

    一.properties文件 Properties文件是java中很常用的一种配置文件,文件后缀为“.properties”,属文本文件,文件的内容格式是“键=值”的格式,可以用“#”作为注释,jav ...

  4. 编码&解码

    编码与解码首先,明确一点,计算机中存储的信息都是二进制的 编码/解码本质上是一种映射(对应关系):比如‘a’用ascii编码则是65,计算机中存储的就是00110101,但是显示的时候不能显示0011 ...

  5. tomcat域名配置

    修改tomcat目录下的web配置文件 vim conf/server.xml 在host标签内添加 <Context path="bbs" docBase="/a ...

  6. h5 页面 禁止网页缩放

    //禁用双指缩放: document.documentElement.addEventListener('touchstart', function (event) { if (event.touch ...

  7. vue ui组件muse-ui的使用

    安装 npm install muse-ui typeface-roboto material-design-icons vuex axios --save Muse UI 是一套 Material ...

  8. LeetCode728. 自除数

    自除数 是指可以被它包含的每一位数除尽的数. 例如,128 是一个自除数,因为 128 % 1 == 0,128 % 2 == 0,128 % 8 == 0. 还有,自除数不允许包含 0 . 给定上边 ...

  9. .NET中的缓存实现

    软件开发中最常用的模式之一是缓存,这是一个简单但非常有效的概念,想法是重用操作结果,执行繁重的操作时,我们会将结果保存在缓存容器中,下次我们需要该结果时,我们将从缓存容器中取出它,而不是再次执行繁重的 ...

  10. iptables工具

    http://www.linuxidc.com/Linux/2012-12/77074.htm iptables 指令 语法: iptables [-t table] command [match]  ...