CSS绘制呼呼大睡的可爱熊

前言

使用CSS可以绘制很多有意思的小动画效果，上一篇学习用JS绘制月日历框，并同时用圆圈圈标示出当日日期。这篇就来用CSS绘制呼呼睡觉的小熊，总的思路就是将小熊拆分成不同部位，依次绘制出来即可。

实现思路

将呼呼睡觉的可爱小熊拆分开，绘制好不同部位再组合一起即可形成完整身体，搭配小动画就比较形象展示呼呼大睡的状态。 先把小熊的大致轮廓绘制出来，头部，口鼻部位，熊耳朵，整个身子

// 绘制身体
.body {
  width: 300px;
  height: 150px;
  background: #594a41;  // 设定为褐色
  left: 228px;
  border-radius: 50%;
  bottom: 29px;
}

// 头部
.head {
  z-index: 10;
  width: 152px;
  height: 70px;
  bottom: 32px;
  left: 143px;
  background: #A78A7F; // 头部设定为棕色
  border-radius: 100%;
}

耳朵的绘制还算比较容易，位置先确定好，形状的高度和相对距离设定

.ears {
  width: 42px;
  height: 42px;
  background: #594a41;
  border-radius: 100%;
  left: 220px;
  top: 60px;
  box-shadow: 34px -8px 0 0 #594a41
}

以上处理完绘制出来的身体整体轮廓效果

1. 绘制熊眼睛，鼻子，尾巴等部位

代码处理：

// 绘制鼻子，点缀上腮红
.details {
  width: 25px;
  height: 25px;
  background: #221E22;
  border-radius: 100%;
  z-index: 20;
  box-shadow: 100px 0 0 #AD5D4E;
  bottom: 66px;
  left: 135px;
}

// 处理尾巴
.tail {
  width: 50px;
  height: 50px;
  background: #594a41;
  border-radius: 100%;
  left: 490px;
  top: 60px;
}

绘制完，实现的效果

2. 熊的前，后腿处理

绘制熊的四肢，代码处理

.paws-front {
  z-index: 15;
  background: #A78A7F;
  width: 100px;
  height: 50px;
  bottom: 14px;
  left: 272px;
  border-radius: 80% 22% 55% 50% / 55% 22% 80% 50%;
  transform: rotateZ(12deg);
} 

绘制完效果展示：

3. 熊睡觉呼呼动画效果

先绘制呼呼睡觉的静态展示，再添加动画效果即可

.sleep {
  height: 90px;
  width: 80px;
  position: absolute;
  left: 80px;
  top: 30px;
  font-size: 55px;
}

// 动画处理
@keyframes zz {
  0% {
    opacity: 0;
    transform: scale3d(.2, .2, .2) rotate(-20deg);
  }
  50% {
    opacity: 1;
  }
  80% {
    transform: translateY(-30px) translateX(20px) rotate(10deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

处理完，即整体效果就完成了，大功告成！

最后

遇到一个稍微复杂点的效果，通用的处理方法就是将其分解成简单部分去处理，最后再串起来解决起来也相对简单些，这种处理方式很推荐！这个案例分享完成~