圣诞快乐：纯CSS绘制圣诞老人头像

Javanx

发布于 2019-12-25 10:04:03

7130

发布于 2019-12-25 10:04:03

文章被收录于专栏：web秀 web秀web秀

前言

圣诞来临前夕，为小伙伴们加更一个有趣的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>

动画部分做的不是很精细，有兴趣的可以自己加哦。

总结

善于分解元素，组装元素，这就好比七巧板，通过简单的图形，可以拼出各式各样的图形。

最后祝大家圣诞快乐！

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度