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

代码语言：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="0 0 500 500" height="140" aria-hidden="true">
                    <path d="M68.498 550.001c.279.251.64.386 1.016.386h415.383a1.52 1.52 0 0 0 1.159-.532c.267-.312 6.494-7.715 2.154-17.543-7.665-17.365-47.519-38.93-193.395-43.388 2.992-4.076 6.016-8.137 9.036-12.188 20.214-27.114 36.423-54.776 49.554-84.565 11.766-26.699 23.978-57.841 19.93-89.604-3.947-30.955-19.97-60.646-35.459-89.346-1.157-2.191-2.524-4.562-3.966-7.053-7.788-13.47-17.482-30.233-6.295-41.521a1.528 1.528 0 0 0 .034-2.118 1.532 1.532 0 0 0-2.115-.123c-14.602 12.509-6.967 29.141-1.392 41.286 2.613 5.682 5.294 11.359 7.978 17.032 5.101 10.793 10.379 21.95 15.046 32.975 12.76 30.162 13.451 62.105 2.09 97.528-8.645-25.01-33.274-46.809-57.137-67.929-4.314-3.819-8.62-7.629-12.824-11.45-30.842-28.021-43.366-57.789-38.293-91.005 4.416-28.936 24.609-54.581 45.982-81.732 3.14-3.987 6.282-7.98 9.376-11.989 9.945-12.867 21.285-31.861 18.835-49.257-1.225-8.7-5.836-16.034-13.7-21.806a1.53 1.53 0 0 0-1.958 2.344c6.536 6.227 9.73 13.164 9.765 21.212.101 22.222-24.78 47.714-43.275 65.735 13.602-35.414 24.03-67.85 20.649-101.458-.079-.808-.771-1.398-1.598-1.374a1.532 1.532 0 0 0-1.453 1.53c0 32.552-15.578 64.71-30.646 95.812-15.998 33.023-32.5 67.09-30.695 102.127-1.346-2.895-2.65-5.856-3.993-8.908-10.229-23.256-20.808-47.304-59.288-61.402a1.53 1.53 0 0 0-1.175 2.819c35.766 16.854 43.348 40.523 51.377 65.582 3.957 12.353 8.048 25.125 15.848 36.698 10.964 16.27 28.011 31.387 44.498 46.007 23.051 20.441 46.886 41.577 53.596 65.631 10.594 37.987-16.08 75.01-41.876 110.812l-5 6.955c-5.896 8.229-10.814 15.138-15.587 22.313-120.677.575-189.457 14.104-198.912 39.138-4.586 12.124 6.261 21.956 6.726 22.369z" fill="#8c5f37"></path>
                </svg>
                <svg class="leaf-icon" style="top:130px;left:55px;height:50px;width:50px;transform:rotate(200deg);">
                    <use xlink:href="#leaf">
                </svg>
                <svg class="leaf-icon" style="top:25px;left:120px;height:50px;width:50px;transform:rotate(310deg);">
                    <use xlink:href="#leaf">
                </svg>
                <svg class="leaf-icon" style="top:90px;left:168px;height:65px;width:65px;transform:rotate(35deg);">
                    <use xlink:href="#leaf">
                </svg>
                <svg class="leaf-icon" style="top:98px;left:40px;height:44px;width:44px;transform:rotate(220deg);">
                    <use xlink:href="#leaf">
                </svg>
                <svg class="leaf-icon" style="top:71px;left:50px;height:39px;width:39px;transform:rotate(230deg);">
                    <use xlink:href="#leaf">
                </svg>
                <svg class="leaf-icon" styl.........完整代码请登录后点击上方下载按钮下载查看