圣诞快乐：纯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>
动画部分做的不是很精细，有兴趣的可以自己加哦。
总结
善于分解元素，组装元素，这就好比七巧板，通过简单的图形，可以拼出各式各样的图形。
最后祝大家圣诞快乐！
