svg css树形动画-html代码-BFW代码库

代码语言：html

所属分类：动画

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> CodePenChallenge: Polygon Tree</title>
<style>
    body {
  background: linear-gradient(to bottom, white, #999);
  margin: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  height: 100vh;
}

svg {
  height: 75vh;
  width: 75vw;
}

svg path:nth-child(odd) {
  transform: rotate(2deg);
  transform-origin: center center;
}

.cls-1 {
  fill: #4ba11f;
}

.cls-2 {
  fill: #5db32b;
}

.cls-3 {
  fill: #96c12a;
}

.cls-4 {
  fill: #87c827;
}

.cls-5 {
  fill: #468d21;
}

.cls-6 {
  fill: #629927;
}

.cls-7 {
  fill: #619428;
}

.cls-8 {
  fill: #80bd2c;
}

.cls-9 {
  fill: #8eca32;
}

.cls-10 {
  fill: #7fbf35;
}

.cls-11 {
  fill: #aec355;
}

.cls-12 {
  fill: #839e4c;
}

.cls-13 {
  fill: #66a429;
}

.cls-14 {
  fill: #a2ce2c;
}

.cls-15 {
  fill: #a6c944;
}

.cls-16 {
  fill: #bac768;
}

.cls-17 {
  fill: #cae229;
}

.cls-18 {
  fill: #bfda42;
}

.cls-19 {
  fill: #eaeda0;
}

.cls-20 {
  fill: #f2f5a5;
}

.cls-21 {
  fill: #bedb25;
}

.cls-22 {
  fill: #cbe21f;
}

.cls-23 {
  fill: #92bb30;
}

.cls-24 {
  fill: #a5d124;
}

.cls-25 {
  fill: #a1d423;
}

.cls-26 {
  fill: #d7ec57;
}

.cls-27 {
  fill: #72ac21;
}

.cls-28 {
  fill: #74be21;
}

.cls-29 {
  fill: #5ab225;
}

.cls-30 {
  fill: #6cbb26;
}

.cls-31 {
  fill: #4aa927;
}

.cls-32 {
  fill: #74bc22;
}

.cls-33 {
  fill: #67a429;
}

.cls-34 {
  fill: #67b426;
}

.cls-35 {
  fill: #61b325;
}

.cls-36 {
  fill: #74aa18;
}

.cls-37 {
  fill: #6da222;
}

.cls-38 {
  fill: #419d29;
}

.cls-39 {
  fill: #68b51f;
}

.cls-40 {
  fill: #50a021;
}

.cls-41 {
  fill: #56a421;
}

.cls-42 {
  fill: #007d33;
}

.cls-43 {
  fill: #117031;
}

.cls-44 {
  fill: #258d2c;
}

.cls-45 {
  fill: #7baf16;
}

.cls-46 {
  fill: #76b221;
}

.cls-47 {
  fill: #688d21;
}

.cls-48 {
  fill: #a7c810;
}

.cls-49 {
  fill: #69981e;
}

.cls-50 {
  fill: #3ca42f;
}

.cls-51 {
  fill: #179232;
}

.cls-52 {
  fill: #127331;
}

.cls-53 {
  fill: #6fb121;
}

.cls-54 {
  fill: #509c24;
}

.cls-55 {
  fill: #389829;
}

.cls-56 {
  fill: #72be29;
}

.cls-57 {
  fill: #69ab36;
}

.cls-58 {
  fill: #0e521e;
}

.cls-59 {
  fill: #115b22;
}

.cls-60 {
  fill: #3a8b3a;
}

.cls-61 {
  fill: #0c6326;
}

.cls-62 {
  fill: #106926;
}

.cls-63 {
  fill: #388e26;
}

.cls-64 {
  fill: #0f5f2b;
}

.cls-65 {
  fill: #00682a;
}

.cls-66 {
  fill: #077c31;
}

.cls-67 {
  fill: #008837;
}

.cls-68 {
  fill: #127130;
}

.cls-69 {
  fill: #005321;
}

.cls-70 {
  fill: #2e812b;
}

.cls-71 {
  fill: #618940;
}

.cls-72 {
  fill: #4c802e;
}

.cls-73 {
  fill: #11531d;
}

.cls-74 {
  fill: #27792f;
}

.cls-75 {
  fill: #005723;
}

.cls-76 {
  fill: #316b1e;
}

.cls-77 {
  fill: #255d1b;
}

.cls-78 {
  fill: #015f26;
}

.cls-79 {
  fill: #105526;
}

.cls-80 {
  fill: #1e7227;
}

.cls-81 {
  fill: #79af1a;
}

.cls-82 {
  fill: #007730;
}

.cls-83 {
  fill: #399f2b;
}

.cls-84 {
  fill: #2b8c28;
}

.cls-85 {
  fill: #156e29;
}

.cls-86 {
  fill: #10642a;
}

.cls-87 {
  fill: #188132;
}

.cls-88 {
  fill: #23912e;
}

.cls-89 {
  fill: #449928;
}

.cls-90 {
  fill: #20782a;
}

.cls-91 {
  fill: #2c922d;
}

.cls-92 {
  fill: #49891f;
}

.cls-93 {
  fill: #42831e;
}

.cls-94 {
  fill: #4da626;
}

.cls-95 {
  fill: #0f5d20;
}

.cls-96 {
  fill: #53af25;
}

.cls-97 {
  fill: #9cb843;
}

.cls-98 {
  fill: #94c539;
}

.cls-99 {
  fill: #66a622;
}

.cls-100 {
  fill: #85c730;
}

.cls-101 {
  fill: #50ac26;
}

.cls-102 {
  fill: #63b023;
}

.cls-103 {
  fill: #73be23;
}

.cls-104 {
  fill: #aad941;
}

.cls-105 {
  fill: #c6e56d;
}

.cls-106 {
  fill: #94ba3d;
}

.cls-107 {
  fill: #6db023;
}

.cls-108 {
  fill: #5aa921;
}

.cls-109 {
  fill: #59a320;
}

.cls-110 {
  fill: #6ca826;
}

.cls-111 {
  fill: #88c12d;
}

.cls-112 {
  fill: #78c12a;
}

.cls-113 {
  fill: #aad241;
}

.cls-114 {
  fill: #edeecb;
}

.cls-115 {
  fill: #b8c480;
}

.cls-116 {
  fill: #bac56d;
}

.cls-117 {
  fill: #cee96b;
}

.cls-118 {
  fill: #8dc628;
}

.cls-119 {
  fill: #83c221;
}

.cls-120 {
  fill: #a3ba32;
}

.cls-121 {
  fill: #e2f35f;
}

.cls-122 {
  fill: #d8e859;
}

.cls-123 {
  fill: #abd92e;
}

.cls-124 {
  fill: #b3c92b;
}

.cls-125 {
  fill: #b3b874;
}

.cls-126 {
  fill: #afb94a;
}

.cls-127 {
  fill: #b1bd64;
}

.cls-128 {
  fill: #bac188;
}

.cls-129 {
  fill: #9cb657;
}

.cls-130 {
  fill: #aebf76;
}

.cls-131 {
  fill: #a2b952;
}

.cls-132 {
  fill: #7fab3b;
}

.cls-133 {
  fill: #125021;
}

.cls-134 {
  fill: #378c26;
}

.cls-135 {
  fill: #207a29;
}

.cls-136 {
  fill: #7c443b;
}

.cls-137 {
  fill: #003415;
}

.cls-138 {
  fill: #031e0d;
}

.cls-139 {
  fill: #260c09;
}

.cls-140 {
  fill: #5b1614;
}

.cls-141 {
  fill: #421f1c;
}

.cls-142 {
  fill: #3f7027;
}

.cls-143 {
  fill: #64a32b;
}

.cls-144 {
  fill: #99b061;
}

.cls-145 {
  fill: #8f5549;
}

.cls-146 {
  fill: #511b19;
}

.cls-147 {
  fill: #260b0a;
}

.cls-148 {
  fill: #5b1a1c;
}

.cls-149 {
  fill: #512621;
}

.cls-150 {
  fill: #9b5d4c;
}

.cls-151 {
  fill: #451312;
}

.cls-152 {
  fill: #301612;
}

.cls-153 {
  fill: #541414;
}

.cls-154 {
  fill: #632e28;
}

.cls-155 {
  fill: #1c4416;
}

.cls-156 {
  fill: #2e5718;
}

svg {
  transform-style: preserve-3d;
  filter: drop-shadow(200px -100px 0px rgba(28, 68, 22, 0.05)) drop-shadow(-200px -100px 0px rgba(28, 68, 22, 0.05));
}

.cls-2 {
  transform-origin: 50% 50%;
  animation: rotate 6444ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-3 {
  transform-origin: 50% 50%;
  animation: rotate 4232ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-4 {
  transform-origin: 50% 50%;
  animation: rotate 6706ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-5 {
  transform-origin: 50% 50%;
  animation: rotate 3376ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-6 {
  transform-origin: 50% 50%;
  animation: rotate 6097ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-7 {
  transform-origin: 50% 50%;
  animation: rotate 2315ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-8 {
  transform-origin: 50% 50%;
  animation: rotate 2272ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-9 {
  transform-origin: 50% 50%;
  animation: rotate 4121ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-10 {
  transform-origin: 50% 50%;
  animation: rotate 6206ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-11 {
  transform-origin: 50% 50%;
  animation: rotate 5637ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-12 {
  transform-origin: 50% 50%;
  animation: rotate 2202ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-13 {
  transform-origin: 50% 50%;
  animation: rotate 3575ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-14 {
  transform-origin: 50% 50%;
  animation: rotate 5885ms -10000ms linear infinite;
}

.cls-1 {
  display: none;
}

.cls-15 {
  transf.........完整代码请登录后点击上方下载按钮下载查看