用CSS画一朵太阳花

画这个花思路还是比较简单的,先把任务分解

  1. 首要任务是画一朵花瓣
  2. 花瓣画成后,用transform中的 rotate(30deg)函数重复11次,再在中间画个圈,太阳花的骨架就成了。
  3. 画眼睛和嘴巴,然后给整体上上颜色
  4. 希望把花做成可变大小式的(不是固定像素尺寸),即用一个css属性即可控制

  5. 第一步,画花瓣方法有很多,这里我采用的是transform配合border-radius:先画一个正方形,然后用transform的skewX(30deg)把这个正方形压扁变成===》平行四边形,用border-radius: 0 50% 50% 50%;设置三边的圆角===》花瓣出来了。

  6. 第二步,由于在步骤一中压扁的transform用了transform-origin: 0 0;,而现在要做的是控制花瓣样式让它绕着花心旋转,所以这时候的transform是花心的位置。我这里采用的方法是直接给花瓣弄了个父元素 ,让父元素以花心为圆心进行旋转。
  7. 第三步,画眼睛,直接画俩黑色的圈圈,然后再用before和after俩伪元素弄弄两个白色的点,让眼睛看起来泪汪汪的可怜状,最后再加个box-shadow,就当做化妆弄眼影了。嘴巴分成两部分,下面部分是个半圆,上面部分是有点凸起的弧线,也通过控制 border-radius: .x1 x2 0 0/y1 y2 0 0; 来实现, x1,y1为组成弧线的两条垂直宽高,x1(x2)比y1(y2) 要大挺多的,也就代表弧度比较平。上颜色就不说了,直接通过css,nth-child选择器,然后这个例子中花瓣的颜色是我根据自己拍的那张毛绒玩具照片,用取色器直接取下来的(拍摄光线原因颜色不是很精确)。
  8. 第四步,在一个地方想引入这朵花,场景不同宽高大小肯定是不一样的嘛。实现方法也挺多,我这边尝试了‘em’这种方案,给整体的父元素设一个font-size,然后花里面所有的尺寸都根据它来。设置这个font-size也有学问,因为一般浏览器最小的能显示像素值是12px,所以想要控制花朵大小游刃有余,在font-size:12px的时候,花朵是足够小的。

画花的过程图可以参考下我7月13号发的相册

初版代码已上传到这儿:

https://codepen.io/kaikai1024/pen/VjyVNB