CSS绘制可爱的小熊睡得很香

我正在参加“掘金挑战守则”。详情请见： 掘金挑战赛来了！

前言

使用 CSS 绘制很多有趣的小动画效果。在上一篇文章中，我学会了用JS画月历框架，同时用圆圈标出当天的日期。本文将使用 CSS 绘制睡熊。总体思路是将熊分成不同的部分，依次绘制。

掘金代码

实现想法

把睡着的萌熊分割，画出不同的部分，组合在一起，组成一个完整的身体，用小动画比较睡着的状态。
首先画出熊、头、鼻子、熊耳朵和整个身体的轮廓

// 绘制身体
。身体 {
宽度：300px；
高度：150px；
background: #594a41; // 设定为褐色
左：228px；
边界半径：50%；
底部：29px；
}

// 头部
。头 {
z 指数：10；
宽度：152px；
高度：70px；
底部：32px；
左：143px；
background: #A78A7F; // 头部设定为棕色
边界半径：100%；
}
复制代码

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

。耳朵 {
宽度：42px；
高度：42px；
背景：#594a41；
边界半径：100%；
左：220px；
顶部：60px；
盒子阴影：34px - 8px 0 0 #594a41
}
复制代码

经过以上处理后绘制的身体整体轮廓效果

1.画出小熊的眼睛、鼻子、尾巴等部位

代码处理：

// 绘制鼻子，点缀上腮红
。细节 {
宽度：25px；
高度：25px；
背景：#221E22；
边界半径：100%；
z 指数：20；
盒子阴影：100px 0 0 #AD5D4E;
底部：66px；
左：135px；
}

// 处理尾巴
。尾巴 {
宽度：50px；
高度：50px；
背景：#594a41；
边界半径：100%；
左：490px；
顶部：60px；
}
复制代码

绘制后，达到的效果

2.熊的前后腿

绘制熊的四肢，代码处理

.爪子前{
z指数：15；
背景：#A78A7F；
宽度：100px；
高度：50px；
底部：14px；
左：272px；
边界半径：80% 22% 55% 50% / 55% 22% 80% 50%；
变换：旋转Z（12度）；
}
复制代码

绘制后效果展示：

3.熊睡觉呼呼的动画效果

先画一个呼呼睡的静态展示，再添加动画效果。

.睡觉 {
高度：90px；
宽度：80px；
位置：绝对；
左：80px；
顶部：30px；
字体大小：55px；
}

// 动画处理
@keyframes zz {
0% {
不透明度：0；
变换：scale3d( .2, .2, .2) 旋转(-20deg);
}
50% {
不透明度：1；
}
80% {
变换： translateY(-30px) translateX(20px) 旋转(10deg);
不透明度：0；
}
100% {
不透明度：0；
}
}
复制代码

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

最后

当遇到稍微复杂一点的效果时，一般的方法是把它分解成简单的部分进行处理，最后串起来解决问题。强烈推荐这种方法！本案例分享完毕~

存在 掘金 (JUEJIN) 共同分享知识，不断学习！

版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。

这篇文章的链接： https://homecpp.art/5522/10201/1555

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38834/31272311