svg css树形动画
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0