简单手写实现类组件的Ref

前言

使用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;}
} 

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

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享