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" viewBox="0 0 93.999 93.999">
                <path d="M23.602 17.519C4.491 28.608 5.588 46.67 6.246 53.353c24.684-29.24 61.606-27.822 61.606-27.822S15.514 43.484.142 79.485c-1.214 2.842 5.696 6.538 7.273 3.178 4.707-10.012 11.266-17.521 11.266-17.521 9.677 3.601 26.417 7.821 38.282-.528 15.76-11.091 14.149-35.677 36.647-47.648 5.255-2.795-44.099-14.482-70.008.553z"/>
            </symbol>
        </svg>
        <div class="tree-abs">
            <div class="tree-wrap">
                <svg class="treeicon" viewBox.........完整代码请登录后点击上方下载按钮下载查看