0%

svg | 花朵矢量图

简单,但是效果非常惊艳。


页面结构


  • svg
  • css3

svg


结构

  • 一张图片
    • 用来做背景,也就是花后面的颜色
  • 花的 svg

原始图如下:

Artboard 1

原理

这里有两个动作效果

  • 花本身的自我闪动
  • 背后的上色

花本身的自我闪动

本身的花是没有闪动效果的,而是在上面定义了很多 filter 然后利用 css3 来控制的。

相关的资料请看

请我喝杯咖啡吧~