聖誕快樂：純CSS繪製聖誕老人頭像

• 2019 年 12 月 25 日
• 筆記

前言

聖誕來臨前夕，為小夥伴們加更一個有趣的CSS3效果，CSS3聖誕老人，同時祝大家聖誕快樂。

也預示這2019接近尾聲，還有心愿和目標沒有實現的要加油哦。

下面看看示例圖：

圖例解析

看了上圖，我們先分解一下圖形，一步一步實現

1、整個頭像用一個圓形包裹 2、頭像分為上下兩部分，頭和身體 3、頭有分為帽子，臉部，鬍子，耳朵；身體上還有扣子 4、臉上有眼睛，鼻子，嘴巴

ok，分解細緻後，我們就把大致的結構畫出來，動畫先忽略。

html結構分解

身體部分

<div class="window">    <div class="santa">      <div class="body"></div>    </div>  </div>    <style>  body {    background: #de2f32;  }  .window {    width: 340px;    height: 340px;    background: #a0d5d3;    position: absolute;    top: 50%;    left: 50%;    border-radius: 50%;    margin-top: -60px;    transform: translate(-50%, -50%);    border: 10px solid #f8e7dc;    overflow: hidden;  }    .santa {    position: absolute;    left: 50%;    bottom: 0;    transform: translateX(-50%);  }    .santa .body {    width: 190px;    height: 210px;    background: #de2f32;    position: relative;    border-radius: 50%;    top: 0;    transform: translateY(50%);  }    .santa .body:before {    content: " ";    width: 7px;    height: 7px;    background: #f7be10;    border-radius: 50%;    position: absolute;    top: 35%;    left: 50%;    transform: translate(-50%, -50%);    box-shadow: 0px -18px 0px #f7be10, 0px 18px 0px #f7be10;  }  <style>

解析

1、元素水平垂直居中，第一小節裡面已經講過

top: 50%;  left: 50%;  transform: translate(-50%, -50%);

2、box-shadow繪製衣服的扣子

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 指陰影水平偏移量，其值可正可負，正值，則陰影在對象的右邊，負值，陰影在對象的左邊

v-shadow 指陰影的垂直偏移量，其值也可以是正負值，正值，陰影在對象的底部，負值時，陰影在對象的頂部

blur 陰影模糊半徑，此參數是可選，只能為正值，如果其值為0時，表示陰影不具有模糊效果，值越大陰影的邊緣就越模糊

spread 陰影擴展半徑，其值可為正負值，正值，則整個陰影都延展擴大，反之，則縮小

color 陰影顏色，不設定任何顏色時，瀏覽器會取默認色，但各瀏覽器默認色不一樣，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。

inset 陰影類型，默認的投影方式是外陰影；inset就是將外陰影變成內陰影

注意: 多層陰影，最內層優先順序最高，之後依次降低。使用逗號「，」隔開。

帽子部分

<div class="face">    <div class="red-hat">      <div class="white-part"></div>      <div class="red-part"></div>      <div class="hat-ball"></div>    </div>  </div>  <style>  .face {    position: relative;    margin: 400px auto;    width: 120px;    height: 130px;    background: #edcab0;    background: radial-gradient(#edcab0, #e9a982);    border-radius: 50%;    border: 3px solid #f8e7dc;  }  .red-hat{    position: relative;    width: 120px;  }  .red-hat .white-part {    position: absolute;    left: 50%;    top: 0;    -webkit-transform: translateX(-50%);    -moz-transform: translateX(-50%);    -ms-transform: translateX(-50%);    -o-transform: translateX(-50%);    transform: translateX(-50%);    width: 90%;    height: 32px;    background: #f8e7dc;    border-radius: 50px;    z-index: 4;    box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1);  }    .red-hat .red-part {    width: 120px;    height: 120px;    background: #de2f32;    position: absolute;    top: -50px;    left: 15px;    border-radius: 50%;    z-index: -1;  }    .red-hat .red-part:before {    content: " ";    width: 95px;    height: 95px;    position: absolute;    left: 0;    top: 12px;    border-radius: 50%;    box-shadow: inset -8px -1px 0px -5px rgba(0, 0, 0, 0.05);  }    .red-hat .red-part:after {    content: " ";    position: absolute;    right: 0;    top: 60px;    background: #de2f32;    width: 20px;    height: 50px;  }    .red-hat .hat-ball {    width: 38px;    height: 38px;    background: #f8e7dc;    border-radius: 50%;    z-index: 5;    position: absolute;    right: -20px;    top: 40px;    box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1);  }  </style>

解析

1、臉元素上面加了徑向漸變radial-gradient，看起來有光暗效果 2、帽子上面通過box-shadow添加摺痕和陰影等

嘴巴/鼻子/鬍子部分

<div class="face">    <div class="red-hat">      ...    </div>    <div class="beard">      <div class="nouse"></div>      <div class="mouth"></div>    </div>  </div>  <style>  .face {    position: relative;    ...  }  ...  .face .beard {    width: 55px;    height: 55px;    background: #f8e7dc;    border-radius: 50%;    position: absolute;    bottom: -30px;    left: 50%;    transform: translateX(-50%);  }    .face .beard:before,  .face .beard:after {    content: " ";    width: 80px;    height: 80px;    background: #f8e7dc;    border-radius: 50%;    position: absolute;    bottom: 15px;  }    .face .beard:before {    left: -40px;  }    .face .beard:after {    right: -40px;  }    .face .beard .nouse {    width: 25px;    height: 20px;    border-radius: 50%;    background: #edcab0;    position: absolute;    z-index: 3;    box-shadow: inset -3px -3px 0px #e9a982;    left: 50%;    transform: translateX(-50%);    top: -42px;  }    .face .beard .mouth {    background: #a8744f;    z-index: 3;    position: absolute;    width: 15px;    height: 5px;    border-bottom-right-radius: 80px 50px;    border-bottom-left-radius: 80px 50px;    left: 50%;    top: 0;    transform: translateX(-50%);  }  </style>

解析

1、通過偽類:before、:after製作鰓旁鬍子 2、鼻子通過box-shadow，使其更有立體感

眼睛

眼睛就非常簡單了，通過:before、:after製作兩隻眼睛

border-top: 2px solid #a8744f;  border-radius: 50%;

只設置border-top，同時border-radius:50%，就有月牙形狀的眼睛了，像素越小，笑的越迷人哦。

完整結構

<!-- 圓形框 -->  <div class="window">    <div class="santa">      <!-- 頭部分 -->      <div class="head">        <!-- 臉 -->        <div class="face">          <!-- 帽子 -->          <div class="red-hat">            <!-- 帽沿 -->            <div class="white-part"></div>            <!-- 帽子紅色部分 -->            <div class="red-part"></div>            <!-- 帽子上垂下的球 -->            <div class="hat-ball"></div>          </div>          <!-- 眼睛 -->          <div class="eyes"></div>          <!-- 鬍子 -->          <div class="beard">            <!-- 鼻子 -->            <div class="nouse"></div>            <!-- 嘴巴 -->            <div class="mouth"></div>          </div>        </div>        <!-- 耳朵 -->        <div class="ears"></div>      </div>      <!-- 身體部分，包含扣子 -->      <div class="body"></div>    </div>  </div>

動畫部分做的不是很精細，有興趣的可以自己加哦。

總結

善於分解元素，組裝元素，這就好比七巧板，通過簡單的圖形，可以拼出各式各樣的圖形。

最後祝大家聖誕快樂！