用CSS画小猪佩奇,你就是下一个社会人! js将“I am a coder”反转成 “coder a am I”,不许用split,join,subString,reverse;求解方法三...
用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 参数设置。大体绘画步骤如下:
- 画椭圆;
- 调 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 的标尺。同时用取色器拿到佩奇各部分颜色。接下来就是整体的调试了,对我这种绘画处于小鸡啄米水平的人来说,这个才是最难的。
<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
问答
如何验证CSS颜色名称?
相关阅读
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;求解方法三
// 方法一 正则
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;
}
添加回答
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
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);
|
方法三
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);
转载于:https://www.cnblogs.com/cjm123/p/9058177.html
用CSS画小猪佩奇,你就是下一个社会人! js将“I am a coder”反转成 “coder a am I”,不许用split,join,subString,reverse;求解方法三...相关推荐
- 用CSS画小猪佩奇,你就是下一个社会人!
我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 小猪佩奇已经火了好一阵了,其实一开始我是不屑的.纵观小朋友的历届动画,无论喜洋洋.熊出没还是小兔兵兵.小熊维尼,火过一阵便迅 ...
- 用CSS画小猪佩奇,你就是下一个社会人! 1
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 背景 小猪佩奇已经火了好 ...
- 记:css绘制小猪佩奇的项目及踩过的坑
下面是我项目的代码和预览链接,觉得项目好看又实用的小伙伴,随手给个star, 您的star是我最大的动力!!! 项目源码 预览链接 移动端实现效果的展示,点击download下载观看 这一项目的主题的 ...
- 用python3 画小猪佩奇
用python3 画 小猪佩奇 python3 中 有一个 turtle , 就是乌龟,原生的库, 画一下基本的平面图形还是可以的. 下面简单介绍 一下turtle库常用的方法: turtle.cir ...
- html css画小猪佩琪,【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- 怎么用python画房子_怎么用python画小猪佩奇
最近社会猪可是火遍了大江南北,不蹭下热度可对不起它.见过手画的佩奇,见过用代码画的吗? 没有?那就来看我大显身手. 用python的turtle库来画小猪佩奇. 有人问:turtle难不难? 答曰:不 ...
- 惊呆了!C语言也能画小猪佩奇?【附源码】社会我佩奇哥!
社会我佩奇兄那么火,那么我们接下来就分享下如何用 C语言 画小猪佩奇 使用带符号距离场(signed distance field, SDF)表示圆形: 沿用这个方法表示形状,但这次我们想利用 ASC ...
- 用Python画小猪佩奇
最近社会猪可是火遍了大江南北,不蹭下热度可对不起它.见过手画的佩奇,见过用代码画的吗? 没有?那就来看我大显身手. 用python的turtle库来画小猪佩奇. 有人问:turtle难不难? 答曰:不 ...
- 用python画小猪佩奇的编码_如何用Python代码画小猪佩奇
Python语言的功能太强大了,可以制作出很多想想的作品来,不信吗?用Python代码还可以画出小猪佩奇,代码其实很简单的,下面,就将几个关键步骤代码分享出来. 怎么用Python代码画小猪佩奇? 首 ...
最新文章
- 栈与队列6——生成最大窗口值数组
- 工作日志-W1444
- MySQL各部门求最值_mysql 求分组最大值的十个解法
- Oracle 11g Dataguard参数详解
- c语言库函数fgets,C语言 标准I/O库函数 fgets 使用心得
- matlab大作业题题单,2011MATLAB大作业-题目-
- Spring的Annotation使用注意
- 解析全球热点安全事件背后的玄机
- LeetCode 435. 无重叠区间(贪婪算法)
- c语言回文串试题,最短回文串 -- C语言
- 小米开发版安装magisk_小米开发版安装magisk(面具),不用第三方rec就可以安装...
- Aladdin HASP SRM(AES-128)加密狗破解经验分享
- 南京邮电大学计算机科学楼,南京邮电大学bbs
- 肿瘤外显子数据分析 -- 20201119
- Python语言在人工智能中的优势有哪些?
- 【Java SE】数组
- 搜索关键字拼音智能提示实现
- Hadoop(八)网站流量分析
- 能源数字化,未来四十年看什么?
- 数据结构第二章 线性表
热门文章
- 深入理解Java虚拟机小结
- 哔哩哔哩(bilibili)视频下载-支持4K
- Linux学习之定时任务调度
- 如何在云服务器上跑深度学习的代码?(ResNet50为例)
- 爱科赛博冲刺科创板:拟募资3.8亿 陕西集成电路与达晨是股东
- java日期转字符串_Java时间日期格式转换Date转String和String转Date
- 数字图像处理作业-医学图像浏览器
- 笔记本电脑触控板操作小结
- uni-app中picker组件的“取消”“完成”国际化,能变成英文
- 文献翻译1:Oriented R-CNN for Object Detection