我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
先奉上代码，欢迎━(｀∀´)ノ亻!点赞交流，Thanks♪(･ω･)ﾉ~ 码上掘金
前言
大家好，CSS画儿系列又来啦。
一年一度的教师节要到啦，已经想不起来在学校的那些年是怎么来庆祝教师节的。恰好赶上“码上掘金挑战赛”，我们以“小红花”来致敬老师和我们曾经的学生岁月。
今天，就让我们再做一次“好学生”，代替老师送我们自己一朵小红花。
通俗易懂的实现
打基础
我们先找一朵小红花，采集到对应的色值。
画个笑脸
小红花和公益一样，都是要以人为主体，因此我们先来在花儿的中央用相对定位画一个大大的笑脸。
首先，整个脸是最容易实现的，就是一个大大的圆，然后background-color结合border完成肤色处理。
其次，比较简单的就是鼻子，抽象来看呢就是一个椭圆，我们可以通过设置border-radius: 120px / 30px;来把鼻子捏出来。
腮红呢（姑且称之为腮红吧），就是通过伪类元素来画出两个圆角矩形，再进行一次旋转就可以啦。
.cheek {
position: absolute;
left: 20px;
top: 60px;
transform: rotate(45deg);
&:before,
&:after {
display: block;
content: "";
width: 4px;
height: 10px;
border-radius: 4px;
background-color: var(--cheek-color);
position: absolute;
left: 0;
animation: cheek 2s ease-in 0s infinite normal forwards;
}
&:after {
left: 8px;
top: -4px;
}
&2 {
left: 90px;
}
}
这对大眼睛，稍稍有一点点难度，其实也没啥难度，还是老三样border和border-radius、transform的结合用法。
.eye {
width: 10px;
height: 20px;
border: 3px solid var(--eye-color);
border-radius: 100% 0 0 100% /50%;
border-right: none;
transform: rotate(100deg);
position: absolute;
top: 36px;
left: 20px;
&2 {
transform: rotate(80deg);
left: 80px;
}
}
就这样，一个大大的笑脸就完成啦。如果你愿意看到这里，记得开心笑一下。
简单的小红花
接下来，我们就开始进入画个花儿的部分啦。
Emm，首先我们先来分析下这朵花，其实是包含了5个相似的花瓣。那是不是意味着，我们可以先画出一个花瓣，复制粘贴来搞定它？！
我们再进一步剖析会发现，每个花瓣其实可以用两个叠加的椭圆来完成，为了方便称呼，我们就称之为花苞bud吧。
画个花苞
一步步剖析下来，我们只需要来实现简单的图形，通过不同的排列组合就可以完成花苞的结构啦。不过看起来，是不是哪里不对？是的，多出来一条边线。
那我们简单的通过设置border单边透明度可以么？不行。
那我们就换另一种简单的方法：再叠加一个新的无边框椭圆，盖上去，覆盖掉我们不想看到的部分。
复制花瓣
沿袭我们力求简单的宗旨，我们复制出来4个花苞，通过修改相对定位、旋转角度就完成花瓣的实现啦。
加点小细节
我们来加一点点小小的animation让小红花有一点点动感。
.cheek {
// ...
&:before,
&:after {
// ...
animation: cheek 2s ease-in 0s infinite normal forwards;
}
}
@keyframes cheek {
0%, 20% {
transform: translateY(0);
}
30% {
transform: translateY(2px);
}
40%, 100% {
transform: translateY(0);
}
}
写到最后
有人说过技术文章要有深度，但是这篇文章，我还是想力求简单，用最简单的方法来实现TA，就是这么简单。
教师节眼看着就到了，先麻溜的用最通俗易懂的CSS实现一朵小红花，替我们的老师送给自己，毕竟谁还不是个学生呢？
当然，还要记得开心(^▽^)(^▽^)~
