svg+anime实现树木生长动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+anime实现树木生长动画效果代码

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

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

<style>
    body {
  margin: 0;
}

.tree {
  fill: #b68000;
  height: 100vh;
  left: calc(50% - 50vh);
  position: relative;
  width: 100vh;
}

.leaf {
  fill: #009100;
  opacity: 0;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<svg class="tree" width="400" height="400" viewBox="0 0 100 100">
    <!-- trunk -->
    <path class="trunk"
      d="m 32.001,71.999 c 2.895142,0 14.968903,0.001 16.003,0.001 0,-0.320408 0,-0.333333 0,-0.5 0,-0.166667 0,-0.240481 0,-0.5 0,-0.259519 -0.0566,-0.85081 -0.001,-1.057115 0.0556,-0.206304 -0.0013,-0.229621 0.14697,-0.749144 0.233088,-0.265059 0.243678,-0.340466 0.656752,-0.456471 0.346109,-0.05127 0.324002,-0.138862 0.664082,-0.149533 0.330036,0.005 0.15658,0.02801 0.535516,0.01471 0.381168,0.01014 0.199735,-0.0013 0.584014,0.116507 0.223564,0.08881 0.144805,0.148719 0.220608,0.456866 0.05348,0.323772 0.189003,0.655154 0.192058,0.95262 0.0031,0.297465 0,0.642969 0.001,0.871563 0,0.228594 0,0.333333 0,0.5 0,0.166667 0,0.201689 0,0.5 1.243036,0 13.36167,-0.001 15.996994,-0.001 0,1.817984 -0.001,1.360662 -0.001,3.002 -4.616138,0 -29.632675,0 -35,0 0,-1.390984 0,-1.37666 0.001,-3.001003 z"
    ></path>
    <!-- leafs -->
    <path class="leaf leaf1"
      d="m 40.662502,51.682985 c 0,0.63473 -0.50588,1.035091 -0.980139,1.035091 -0.474258,0 -1.011071,-0.340954 -1.006872,-0.993399 0.0042,-0.652445 0.526473,-1.022497 1.0389,-1.009678 0.512426,0.01282 0.909335,0.467778 0.916274,0.761224 -0.09254,-0.02575 -0.09371,-0.04229 -0.154305,0.02362 -0.08416,0.01768 -0.06451,0.01049 -0.150562,0.08894 0.0934,0.08179 0.06081,0.08026 0.172104,0.09473 0.07948,0.01272 0.08446,0.0058 0.1646,0 z"
    ></path>
    <path class="leaf leaf2"
      d="m 38.541595,46.605911 c -0.339291,0.536437 -0.980841,0.604383 -1.381657,0.35087 -0.400814,-0.253511 -0.672242,-0.828616 -0.319933,-1.377779 0.35231,-0.549163 0.991514,-0.582731 1.417734,-0.297982 0.426219,0.284749 0.518468,0.881418 0.367473,1.13313 -0.06445,-0.07123 -0.05659,-0.08583 -0.143035,-0.06252 -0.08058,-0.03005 -0.06013,-0.02562 -0.174789,-0.0053 0.03522,0.119051 0.0085,0.100337 0.09481,0.172058 0.06037,0.05324 0.06828,0.05005 0.139392,0.08754 z"
    ></path>
    <path class="leaf leaf3"
      d="m 45.960351,40.444238 c -0.504476,0.385211 -1.12969,0.226117 -1.417512,-0.150819 -0.28782,-0.376934 -0.342619,-1.010508 0.178484,-1.403131 0.521105,-0.392623 1.132179,-0.202105 1.432975,0.212945 0.300796,0.415051 0.180079,1.006618 -0.04894,1.190221 -0.0357,-0.08918 -0.02326,-0.100141 -0.112419,-0.108305 -0.06513,-0.05616 -0.04749,-0.04491 -0.162068,-0.06567 -0.0083,0.123873 -0.02688,0.09704 0.02915,0.194276 0.03812,0.07089 0.04665,0.07065 0.100313,0.130502 z"
    ></path>
    <path class="leaf leaf4"
      d="m 51.051398,38.01044 c 0.633571,-0.03835 1.002636,-0.567494 0.973981,-1.040888 -0.02866,-0.47339 -0.401421,-0.988623 -1.052418,-0.945011 -0.651001,0.04361 -0.988821,0.587291 -0.945065,1.098006 0.04376,0.510715 0.521866,0.879411 0.815197,0.868606 -0.03129,-0.09083 -0.04787,-0.09098 0.01425,-0.155452 0.01256,-0.08508 0.0066,-0.06502 0.0797,-0.15565 0.08727,0.0883 0.08378,0.05586 0.104961,0.166061 0.01751,0.07856 0.01089,0.08396 0.0094,0.164332 z"
    ></path>
    <path class="leaf leaf5"
      d="m 55.614401,40.639679 c 0.470683,0.425841 1.106964,0.31931 1.425145,-0.03238 0.318175,-0.351688 0.425492,-0.978504 -0.06114,-1.413114 -0.486636,-0.434614 -1.111442,-0.295588 -1.445723,0.093 -0.334278,0.388591 -0.263192,0.988149 -0.05024,1.190167 0.043,-0.08591 0.03151,-0.09786 0.121037,-0.09858 0.06958,-0.05055 0.05107,-0.04078 0.166971,-0.05196 -0.002,0.124132 0.01871,0.09894 -0.04521,0.191178 -0.04388,0.06748 -0.05237,0.06652 -0.110835,0.121692 z"
    ></path>
    <path class="leaf leaf6"
      d="m 61.422851,46.924364 c 0.280942,0.56917 0.911775,0.704268 1.337051,0.49435 0.425269,-0.209919 0.755725,-0.753255 0.46318,-1.336448 -0.292547,-0.583198 -0.924669,-0.683859 -1.378493,-0.445557 -0.453822,0.238306 -0.608364,0.82195 -0.484699,1.088158 0.0716,-0.06406 0.06531,-0.0794 0.148821,-0.04712 0.0833,-0.0214 0.06249,-0.019.........完整代码请登录后点击上方下载按钮下载查看