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，我們一起學前端！