html打造动画【系列1】- 萌萌的大白

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

哈哈哈

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

定义背景

• 因为大白是白的，所以我们可以定义一个深颜色的背景来突出一下大白，让我们在茫茫屏幕中一眼就能看到它，欧耶~

  /*使用了一个渐变色，没有做各个浏览器的兼容性处理*/
  body {background: linear-gradient(to bottom, #f91818 0%,#ea8181 100%);}

定义画大白的容器

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

  <!--定义大白的存放容器-->
  <div id="baymax"></div>
  #baymax {
    margin: 0 auto;/*设置为 居中*/
    height: 600px; /*设置高度*/
    overflow: hidden; /*隐藏溢出*/
  }

画大白的头部

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

  <!-- 定义头部，包括两个眼睛、嘴 -->
        <div id="head">
            <div id="eye">
            </div>
            <div id="eye2">
            </div>
            <div id="mouth">
            </div>
        </div>
  #head { height: 64px;width: 100px;
    border-radius: 50%; /*以百分比定义圆角的形状*/
    background: #fff; /*定义背景颜色*/
    margin: 0 auto;/*头部居中*/
    margin-bottom: -20px;/*这个是为了使头部与身体融为一体*/
    border-bottom: 5px solid #e0e0e0; /*设置下边框的样式，制作阴影的效果*/
    z-index: 100;  /*属性设置元素的堆叠顺序；拥有更高堆叠顺序的元素总是会
                             处于堆叠顺序较低的元素的前面*/
    position: relative; /*生成相对定位的元素，方便眼睛和嘴巴的定位*/
  }
  #eye,#eye2 {width: 11px;height: 13px;background: #282828;border-radius: 50%;
    position: relative; /*生成相对定位的元素，相对于上层头部容器的位置*/
    top: 30px;left: 27px;
    transform: rotate(8deg);/*旋转该元素，让眼睛有一定的角度*/
  }
  #eye2 {
    transform: rotate(-8deg); /*使左右两只眼睛旋转对称*/
    left: 69px; /*设置第二只眼睛相对于头部的位置*/
    top: 17px;
  }
  #mouth {width: 38px;height: 1.5px;background: #282828;
    position: relative;/*生成相对定位的元素，相对于上层头部容器的位置*/
    left: 34px;top: 10px;
  }

  

  大白头部效果.png

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

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

  <!-- 定义躯干，包括心脏 -->
        <div id="torso">
            <div id="heart">
            </div>
        </div>
  #torso {margin: 0 auto;height: 200px; width: 180px;background: #fff;
    border-radius: 47%;/*设置圆角*/
    border: 5px solid #e0e0e0;/*设置边框*/
    border-top: none;/*因为顶部要跟头部做衔接，所以顶部不设置边框*/
    z-index: 1;/*保证躯干堆叠在头部的里面*/
  }
  #heart{
  width:25px;height:25px;border-radius:50%;
  box-shadow:2px 5px 2px #ccc inset;/*向边框四周添加阴影效果*/
  position:relative;/*设置心脏相对于躯干的位置*/
  right:-115px;top:40px;
  z-index:111;/*保证心脏堆叠在躯干的外面*/
  border:1px solid #ccc;
  }

  

  大白躯干效果.png

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

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

  <!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
        <div id="belly">
            <div id="cover">
            </div>
        </div>
  #belly {
    margin: 0 auto;height: 300px;width: 245px;
    margin-top: -140px;/*将腹部往上移动，差不多移到躯干的中间位置*/
    background: #fff;border-radius: 47%;
    border: 5px solid #e0e0e0; /*设置边框*/
    border-top: none;
    z-index: 5;/*保证腹部堆叠在躯干的外面*/
  }
  #cover {
    width: 190px;background: #fff;height: 150px;margin: 0 auto;
    position: relative;/*将cover部分相对定位到要遮挡的位置*/
    top: -20px;border-radius: 50%;
  }

  

  大白的肚子效果.png

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

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

  <!-- 定义左臂，包括一大一小两个手指 -->
        <div id="left-arm">
            <div id="l-bigfinger">
            </div>
            <div id="l-smallfinger">
            </div>
        </div>
        <!-- 定义右臂，同样包括一大一小两个手指 -->
        <div id="right-arm">
            <div id="r-bigfinger">
            </div>
            <div id="r-smallfinger">
            </div>
        </div>
  #left-arm,#right-arm {
    height: 270px;width: 120px;border-radius: 50%;background: #fff;
    margin: 0 auto;
    position: relative; /*将手臂相对定位到相应的位置*/
    top: -350px;left: -100px;
    transform: rotate(20deg); /*将手臂（椭圆）顺时针旋转20度，更加贴合躯干*/
    z-index: -1;/*保证手臂堆叠在躯干的里面*/
  }
  #right-arm {
    transform: rotate(-20deg);/*右手臂（椭圆）相应的逆时针旋转20度，与左手臂对称*/
    left: 100px;top: -620px;
  }
  #l-bigfinger,#r-bigfinger {
    height: 50px;width: 20px;border-radius: 50%;background: #fff;
    position: relative;/*将大手指相对定位到相应的位置，并相应的旋转*/
    top: 250px;left: 50px;transform: rotate(-50deg);
  }
  #r-bigfinger {
    left: 50px;transform: rotate(50deg);
  }
  #l-smallfinger,#r-smallfinger {
    height: 35px;width: 15px;border-radius: 50%;background: #fff;
    position: relative;;/*将小手指相对定位到相应的位置，并相应的旋转*/
    top: 195px; left: 66px;transform: rotate(-40deg);
  }
  #r-smallfinger {
    transform: rotate(40deg);left: 37px;
  }

  

  大白手臂效果.png

画大白的左右腿

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

  <!-- 定义左腿 -->
        <div id="left-leg">
        </div>
        <!-- 定义右腿 -->
        <div id="right-leg">
        </div>
  #left-leg,#right-leg {
    height: 170px;width: 90px;
    border-radius: 40% 30% 10px 45%;/*矩形的左上、右上、左下、右下各个角度画不同程度的圆角*/
    background: #fff;
    position: relative;/*相对定位到对应的位置*/
    top: -640px;left: -45px;
    transform: rotate(-1deg);
    z-index: -2;/*保证腿部堆叠在最下面*/
    margin: 0 auto;
  }
  #right-leg {
    border-radius:30% 40% 45% 10px;
    top: -810px;left: 50px;
    transform: rotate(1deg);
  }

  

  大白腿部效果.png

写在最后的拼图游戏

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

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

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <title>html+css实现大白的画法</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
  <style type="text/css">
      /*定义整体的背景色*/
      body {background: linear-gradient(to bottom, #f91818 0%,#ea8181 100%);}
      #baymax {
    /*设置为 居中*/
    margin: 0 auto;
    /*高度*/
    height: 600px;
    /*隐藏溢出*/
    overflow: hidden;
}

#head {
    height: 64px;
    width: 100px;

    /*以百分比定义圆角的形状*/
    border-radius: 50%;

    /*背景*/
    background: #fff;

    margin: 0 auto;
    margin-bottom: -20px;

    /*设置下边框的样式*/
    border-bottom: 5px solid #e0e0e0;

    /*属性设置元素的堆叠顺序；
    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
    z-index: 100;

    /*生成相对定位的元素*/
    position: relative;
}
#eye,
#eye2 {
    width: 11px;
    height: 13px;
    background: #282828;
    border-radius: 50%;
    position: relative;
    top: 30px;
    left: 27px;

    /*旋转该元素*/
    transform: rotate(8deg);
}

#eye2 {

    /*使其旋转对称*/
    transform: rotate(-8deg);
    left: 69px;
    top: 17px;

}

#mouth {
    width: 38px;
    height: 1.5px;
    background: #282828;
    position: relative;
    left: 34px;
    top: 10px;
}
#torso,
#belly {
    margin: 0 auto;
    height: 200px;
    width: 180px;
    background: #fff;
    border-radius: 47%;

    /*设置边框*/
    border: 5px solid #e0e0e0;
    border-top: none;
    z-index: 1;
}

#belly {
    height: 300px;
    width: 245px;
    margin-top: -140px;
    z-index: 5;
}

#cover {
    width: 190px;
    background: #fff;
    height: 150px;
    margin: 0 auto;
    position: relative;
    top: -20px;
    border-radius: 50%;
}

#heart{
  width:25px;
  height:25px;
  border-radius:50%;
  position:relative;

  /*向边框四周添加阴影效果*/
  box-shadow:2px 5px 2px #ccc inset;

  right:-115px;
  top:40px;
  z-index:111;
  border:1px solid #ccc;
}

#left-arm,
#right-arm {
    height: 270px;
    width: 120px;
    border-radius: 50%;
    background: #fff;
    margin: 0 auto;
    position: relative;
    top: -350px;
    left: -100px;
    transform: rotate(20deg);
    z-index: -1;
}

#right-arm {
    transform: rotate(-20deg);
    left: 100px;
    top: -620px;
}

#l-bigfinger,
#r-bigfinger {
    height: 50px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 250px;
    left: 50px;
    transform: rotate(-50deg);
}

#r-bigfinger {
    left: 50px;
    transform: rotate(50deg);
}

#l-smallfinger,
#r-smallfinger {
    height: 35px;
    width: 15px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 195px;
    left: 66px;
    transform: rotate(-40deg);
}

#r-smallfinger {
    background: #fff;
    transform: rotate(40deg);
    top: 195px;
    left: 37px;
}

#left-leg,
#right-leg {
    height: 170px;
    width: 90px;
    border-radius: 40% 30% 10px 45%;
    background: #fff;
    position: relative;
    top: -640px;
    left: -45px;
    transform: rotate(-1deg);
    z-index: -2;
    margin: 0 auto;
}

#right-leg {
    background: #fff;
    border-radius:30% 40% 45% 10px;
    margin: 0 auto;
    top: -810px;
    left: 50px;
    transform: rotate(1deg);
}
  </style>

</head>

<body>
    <div id="baymax">
        <!-- 定义头部，包括两个眼睛、嘴 -->
        <div id="head">
            <div id="eye">
            </div>
            <div id="eye2">
            </div>
            <div id="mouth">
            </div>
        </div>
        <!-- 定义躯干，包括心脏 -->
        <div id="torso">
            <div id="heart">
            </div>
        </div>
        <!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
        <div id="belly">
            <div id="cover">
            </div>
        </div>
        <!-- 定义左臂，包括一大一小两个手指 -->
        <div id="left-arm">
            <div id="l-bigfinger">
            </div>
            <div id="l-smallfinger">
            </div>
        </div>
        <!-- 定义右臂，同样包括一大一小两个手指 -->
        <div id="right-arm">
            <div id="r-bigfinger">
            </div>
            <div id="r-smallfinger">
            </div>
        </div>
        <!-- 定义左腿 -->
        <div id="left-leg">
        </div>
        <!-- 定义右腿 -->
        <div id="right-leg">
        </div>
    </div>
</body>

</html>

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

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群
343599877，我们一起学前端！