持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

儿童节快到了，用css画一个鲜花送个小朋友们，哈哈哈

效果

代码已经在码上掘金上面发布，效果如下：

code.juejin.cn/pen/7101319…

过程

下面讲讲css画这个鲜花的过程。

我们知道鲜花是分三部分的，花瓣，花蕊，花茎。

我们从中心出发，先画花蕊，再画花瓣，最后画花茎。

花蕊

本质上是一个圆，然后给它一个红色背景。

  <div class="flower">
    <div class="stamen">
       <div class="mouth"></div>
    </div>
  </div>

    .flower {
      position: relative;
    }
    /* 花蕊 */
    .stamen {
      position: relative;
      width: 150px;
      height: 150px;
      background-color: red;
      border-radius: 50%;
      z-index: 1;
    }

接着拟人化，给它一个眼睛，和爱笑的嘴巴。这里我是使用伪元素before,after实现眼睛。

嘴巴的实现是用的边框border实现，把上边框，左边框，右边框设置透明，再设置圆角，就实现了嘴角微微上扬，面带微笑。

    .stamen::before,
    .stamen::after {
      position: absolute;
      top: 40px;
      left: 40px;
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 50%;
    }
    .stamen::after {
      left: inherit;
      right: 40px;
    }

    .mouth {
      position: absolute;
      left: 60px;
      top: 80px;
      width: 30px;
      height: 30px;
      background-color: transparent;
      border: 2px solid #fff;
      border-radius: 50%;
      border-top-width: 0;
      border-top-color: transparent;
      border-left-width: 0;
      border-left-color: transparent;
      border-right-width: 0;
      border-right-color: transparent;
    }

花瓣

花瓣这里我是用左右2个花瓣对称显示的，本质上是个圆环，然后移动到花蕊处，利用花蕊遮挡住部分，实现花瓣。

  <div class="flower">
    <div class="petal-left petal"></div>
    <div class="petal-right petal"></div>
    <div class="stamen">
      <div class="mouth"></div>
    </div>
  </div>

    /* 花瓣 */
    .petal {
      position: absolute;
      width: 50px;
      height: 50px;
      border-width: 2px;
      border-color: brown;
      border-style: solid;
      border-radius: 50%;
      background-color: yellow;
    }

    .petal-left {
      left: 0px;
    }

    .petal-right {
      right: 0px;
    }

花茎

花茎我也是使用一个长方形实现，背景色是绿色，然后使用伪元素before,after实现左右枝芽，对称显示，拟人化，营造一个欢快的气氛。

  <div class="flower">
    <div class="petal-left petal"></div>
    <div class="petal-right petal"></div>
    <div class="stamen">
      <div class="mouth"></div>
    </div>
    <div class="stem"></div>
  </div>

    /* 花茎 */
    .stem {
      position: absolute;
      left: 72.5px;
      bottom: -200px;
      width: 5px;
      height: 200px;
      background-color: green;
    }

    .stem:before,
    .stem:after {
      position: absolute;
      top: 30px;
      left: 2.5px;
      content: '';
      display: block;
      width: 80px;
      height: 5px;
      background-color: greenyellow;
      transform: rotate(-20deg);
    }

    .stem:after {
      left: -78px;
      transform: rotate(20deg);
    }

图片展示

最终的效果如下：

总结

通过把鲜花拆分成花蕊，花瓣，花茎三部分，最后把它们整合在一起，加上自己DIY的样式，就画好了。

大家都画起来吧！