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.01912 0.174375,0.01313 -0.04754,0.114685 -0.01901,0.09888 -0.112392,0.161125 -0.06563,0.0466 -0.07317,0.04258 -0.14784,0.07237 z"
    ></path>
    <path class="leaf leaf7"
      d="m 59.141637,53.08672 c 0.02452,0.634257 0.545488,1.014775 1.019397,0.996452 0.473903,-0.01833 0.997143,-0.379762 0.967744,-1.031553 -0.0294,-0.651797 -0.565583,-1.001395 -1.07713,-0.968791 -0.511548,0.03261 -0.890585,0.502561 -0.88618,0.796057 0.0915,-0.02931 0.092,-0.04588 0.155103,0.01764 0.08479,0.01442 0.06486,0.008 0.153877,0.08307 -0.09016,0.08534 -0.05767,0.08254 -0.168312,0.101314 -0.07893,0.0158 -0.08417,0.0091 -0.1645,0.0058 z"
    ></path>
    <path class="leaf leaf8"
      d="m 35.974679,35.976181 c -0.603354,0.197095 -1.141009,-0.159458 -1.288275,-0.610274 -0.147265,-0.450814 0.01014,-1.066964 0.631641,-1.265568 0.621497,-0.198604 1.135432,0.182945 1.282364,0.674021 0.146931,0.491077 -0.16229,1.009638 -0.439075,1.107355 -0.0043,-0.09597 0.0111,-0.102206 -0.07037,-0.139343 -0.04294,-0.07452 -0.03,-0.05807 -0.131306,-0.11549 -0.04874,0.114183 -0.0574,0.08273 -0.03661,0.193009 0.01259,0.0795 0.02071,0.08209 0.05161,0.1563 z"
    ></path>
    <path class="leaf leaf9"
      d="m 47.099679,29.819931 c -0.603354,0.197095 -1.141009,-0.159458 -1.288275,-0.610274 -0.147265,-0.450814 0.01014,-1.066964 0.631641,-1.265568 0.621497,-0.198604 1.135432,0.182945 1.282364,0.674021 0.146931,0.491077 -0.16229,1.009638 -0.439075,1.107355 -0.0043,-0.09597 0.0111,-0.102206 -0.07037,-0.139343 -0.04294,-0.07452 -0.03,-0.05807 -0.131306,-0.11549 -0.04874,0.114183 -0.0574,0.08273 -0.03661,0.193009 0.01259,0.0795 0.02071,0.08209 0.05161,0.1563 z"
    ></path>
    <path class="leaf leaf10"
      d="m 51.404951,25.72446 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 leaf11"
      d="m 57.725957,30.186009 c 0.618086,0.144404 1.123038,-0.257125 1.230934,-0.718949 0.10789,-0.461821 -0.101991,-1.062126 -0.73828,-1.20647 -0.636293,-0.144348 -1.115461,0.280045 -1.219557,0.781949 -0.104093,0.501906 0.248634,0.991912 0.532809,1.065429 -0.004,-0.09598 -0.01986,-0.100869 0.0581,-0.144888 0.03636,-0.07794 0.02492,-0.06042 0.120877,-0.126364 0.05838,0.109566 0.06431,0.07748 0.0531,0.189139 -0.0057,0.08029 -0.01357,0.08357 -0.03798,0.160159 z"
    ></path>
    <path class="leaf leaf12"
      d="m 65.351856,37.108326 c 0.598794,0.210544 1.144291,-0.13389 1.301606,-0.581299 0.157309,-0..........完整代码请登录后点击上方下载按钮下载查看