svg+css+js实现绿色树叶组成的小树随风飘动动画效果代码-html代码-BFW代码库

svg+css+js实现绿色树叶组成的小树随风飘动动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css+js实现绿色树叶组成的小树随风飘动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<style>
    :root {
  --theme: rgb(0, 111, 0);
  --theme-light: rgb(0, 132, 0);
 }

body {
  background: #d3f5f1;
}

.tree-abs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 300px;
}

.tree-wrap {
  position: relative;
}

.treeicon {
  position: absolute;
  top: 80px;
  left: 64px;
}

.leaf-icon {
   fill: var(--theme);
   position: absolute;
}

.leaf-icon:nth-child(3n + 1) {
  fill: var(--theme);
}

.leaf-icon:nth-child(3n + 2) {
  fill: var(--theme-light);
}

.leaf-icon:nth-child(3n) {
  fill: rgb(0,154,0);
}
</style>
    </head>
    <body>
        <!-- partial:index.partial.html -->
        <svg style="display:none;">
            <symbol id="leaf" vi.........完整代码请登录后点击上方下载按钮下载查看