html动画（1）大白

每个人心中都有一个暖暖的大白，blingbling的大眼睛~软软的肚子~宽厚的肩膀~善良的心肠~如果可以，我愿意沦陷在大白的肚子里永远不出来，哈哈~毛球要失宠咯~

哈哈哈

每个人都是独立的个体，大白也不例外，仔细观察大白有一个圆圆的头加一对黑溜溜的眼睛，没有腹肌的躯干和一颗裸露的心脏，圆滚滚的肚子两边一对宽厚的臂膀，仔细看还有两个萌萌哒小手指呢，最后一对粗的像大象一样的大腿才能支撑这软软的肚子嘛，哈哈~

定义背景

因为大白是白的，所以我们可以定义一个深颜色的背景来突出一下大白，让我们在茫茫屏幕中一眼就能看到它，欧耶~
```
/*使用了一个渐变色，没有做各个浏览器的兼容性处理*/body {background: linear-gradient(to bottom, #f91818 0%,#ea8181 100%);}
```

定义画大白的容器

定义个div容器，控制大白在屏幕中的整体位置

<!--定义大白的存放容器--><div id="baymax"></div>#baymax {

画大白的头部

大白的头部是一个椭圆形的，不用canvas自带的画椭圆的方法最先想到的就是先画一个长方形然后用圆角矩形（border-radius，设置成50%会有圆形的效果）的方法绘制。
头部下巴那边有一层灰色的阴影，我们在长方形的下面加一个灰色的底边框就可以了。
眼睛也是圆形的可以用同样的方法，将眼睛和嘴巴（那是嘴巴吗？）相对定位在头部相应位置即可。
```

```

大白头部效果.png

画大白的躯干和中间的小心脏

大白脖子到肚子之间的躯干比头部大比肚子小，可以想象成一个竖着的椭圆形跟其他部分拼接而成（要有想象力哦，不像画画，肯定是要各种图形拼接的）。
心脏就是一个圆形，里面的月牙效果可以用内部阴影做出效果。
```

```

大白躯干效果.png

画大白的肚子腹部，包括 cover（和躯干的连接处）

大白的肚子腹部就是比躯干大一圈的椭圆然后移到躯干的中间位置。
但是在衔接部分会有边框的影响，我们可以用一个白色的椭圆将衔接部分的边框遮盖住就可以了。
```

```

大白的肚子效果.png

画大白的左右臂，包括一大一小两个手指

手臂部分是用一个倾斜的椭圆做成，然后隐藏到躯干后面对应的位置即可。
两个小手指也是两个倾斜的小椭圆组合而成，定位到手臂对应的位置即可。
```

```

大白手臂效果.png

画大白的左右腿

腿的画法就是在矩形的基础上，用border-radius方法在矩形的四边画出不同程度的圆角形成腿的形状就行，然后将腿相对定位到身体对应的位置即可。
```

```

大白腿部效果.png

写在最后的拼图游戏

看完整个教程，是不是觉得画一个大白其实就很少的几个知识点：border-radius、position: relative、 z-index、transform: rotate(*deg)、border、box-shadow，剩下的就是靠position和z-index各种定位拼接堆叠，只要想明白了要哪些基本元素，就可以很轻松的拼接成一个萌萌的大白哦~下面我把所有的零部件列举出来，怎么拼接就看自己的想象力咯~哈哈

大白分解和最终效果图.png

完整代码

<!DOCTYPE html><html><head>

PS:学习自其它文章，画完是不是特别有成就感呢，哈哈哈哈哈哈~下次画点啥呢~你说我来画？

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群

343599877，我们一起学前端！

html动画（1）大白相关推荐

开发本无趣，看 Unity 如何为其绽放精彩！
从 0 到 1,从 1 到 ∞,能够让玩家轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型的综合型开发工具 Unity,不仅帮助开发者轻松在游戏领域达成「一次开发,多平台发布」的愿景,更是在影 ...
演讲实录丨朱频频让Bots无处不在
让Bots无处不在朱频频上海智臻智能网络科技公司.小i机器人总裁兼首席技术官朱频频:大家好!我也是蠢蠢的科大人.前几天召开世界人工智能大会,下午做了六场演讲,其中四个是科大校友,今天大概也有至少 ...
第一代社交机器人已死：商业模式错误还是生不逢时？
大数据文摘出品作者:周素云.Stats 熊当智能音响Alexa.小爱同学这类的人工智能产品被广泛接受,渐渐走入我们普通人的生活中,一批曾经激起我们无限遐想的情感社交机器人却慢慢"死去&q ...
大白技术控 | Windows10X 模拟器简单上手体验
点击蓝字"大白技术控"关注我哟加个"星标★",每日 19:30,好文必达! 前言 Windows10X 和 Windows10 有什么区别?当这个问题摆在我面 ...
文字旋转_技术宅大白教你用软件做抖音爆火的文字旋转视频
大家好,你的大白上线咯~ 相信爱刷抖音的你经常会在抖音里看到这种文字旋转的视频,那怎么做这种视频呢? 文字旋转视频做这种视频,有几种常见的方法,下面我们就来一一介绍一下~ 手机App 快影这个A ...
专访 Unity 技术总监 Mark Schoennagel、杨栋：基于 Unity 制作影视动画的几点建议！
伴随着移动互联网.VR/AR.物联网等领域的兴起,智能手机.平板.头显以及更多可穿戴设备的诞生为游戏行业带来了百花齐放百家争鸣的繁荣景象.如今在游戏内容越来越丰富的同时,诸多的传统行业如影视.动画纷纷 ...
大白小课程-跟着官方教程学习Scratch3.0-P04制作音乐
本文是视频教程:大白小课堂:跟着官方教程学习Scratch3.0系列的讲义版本,方便大家查阅视频地址:https://www.bilibili.com/video/av54055338/ 我们今天一 ...
ios网易大白Crash自动防护
大白(Baymax),迪士尼动画<超能陆战队>中的健康机器人,是一个体型胖胖的充气机器人,因呆萌的外表和善良的本质获得大家的喜爱,被称为"萌神". Baymax项目是为 ...
「视频」迪士尼研发机器人皮肤，能做个大白吗？
迪士尼近日展示了一种机器人皮肤,目的是让人类和机器人更好的互动,感觉这皮肤都能做个大白了呢. 机械机器人一直给我们一种冰冷和尖锐的感觉,而如何让机器人拥有仿真的皮肤也是科学家们一直在探索的事情.近日, ...

html动画（1）大白

html动画（1）大白相关推荐

最新文章

热门文章