html动画（1）大白

来源：互联网发布：js 菜单展开收起编辑：程序博客网时间：2024/04/29 11:21

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

html动画（1）大白

哈哈哈

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

定义背景

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

定义画大白的容器

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

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

画大白的头部

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

```

html动画（1）大白

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

html动画（1）大白

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

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

```

html动画（1）大白

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

html动画（1）大白

画大白的左右腿

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

```

html动画（1）大白

写在最后的拼图游戏

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

html动画（1）大白

完整代码

<!DOCTYPE html><html><head>

PS:学习自其它文章，画完是不是特别有成就感呢，哈哈哈哈哈哈~下次画点啥呢~你说我来画？
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！

阅读全文

0 0