CSS

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

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

前言

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

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

总结

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

最后祝大家圣诞快乐!

源码下载地址

资源下载价格1立即支付    升级VIP后免费升级VIP,支付前请先登录,支付前请先登录,支付前请先登录!
本站资源一次收费,永久下载!发现资源失效,联系站长恢复即可!由于源码具有可复制性、可传播性,一经购买,概不退货,购买前请再三确认!本站提供相关技术支持,网站底部联系即可。时间:周一 ~ 周五 9:30-18:00。谢谢合作!

VIP用户所有收费资源免费,登录后左上角点击 昵称 ,进入用户中心充值成为VIP会员!如果您已经登录,点击这里成为尊贵VIP用户!

(423)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注