TweenMax+svg实现盆景水中倒影落叶动画效果代码-html代码-BFW代码库

TweenMax+svg实现盆景水中倒影落叶动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现盆景水中倒影落叶动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<style>
    html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

svg {
  opacity: 0;
}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="200 000 800 600">
 <defs id="defs30">
    <filter id="water">
      <feTurbulence baseFrequency="0.02" numOctaves="1" seed="1" type="turbulence" result="turbulence">
        <animate attributeName="baseFrequency" values="0.02; 0.01; 0.02;" repeatCount="indefinite" dur="20s" begin="0"></animate>
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" in2="turbulence" xChannelSelector="R" yChannelSelector="B" scale="20" result="displacement"></feDisplacementMap>
    </filter>
  <g id="bonsai">
    <path d="m509.21 255.42l9.98-3.669c-5.853 10.179-9.98 3.669-9.98 3.669" class="leaf" fill="#8a0" fill-rule="evenodd"/>
   <path d="m607.32 207.45c-53.36 17.344.966 49.545-1.029 52.45-2.232 9.541-12.926 16.338-20.529 18.564-7.604 2.226-9.981-2.923-9.283-14.09-1.919 7.154-2.291 15.531 3.773 15.967 6.06.436 1.153 5.75-2.309 7.822-3.462 2.072-7.22 3.288-13.195 4.135-.477-7.418-5.383-14.649-5.645-31.14-1.309 12.475 4.054 22.2 3.039 29.35-3.685-4.02-6.972-8.226-30.963-5.521 28.21-.98 29.508 9.318 29.508 9.318 15.464 2.919 27.493-7.898 28.23-11.742 11.717-3 16.353-2.234 18.252 3.369 4.455 11.08 16.972 22.788 15.6 34.527-.837 9.476-33.82 20.869-35.07 30.21.02.353.069.69.139 1.014h-32c0 0-9.1 3.353-10.08 9.04-.98 5.688 10.08 18.527 10.08 18.527h41.35 41.35c0 0 11.06-12.84 10.08-18.527-.98-5.688-10.08-9.04-10.08-9.04h-21.523c5.43-9.146 19.366-20.15 18.771-29.963-.669-7.685-14.198-23.429-17.03-30.611-2.149-7.85 2.493-15.659 8.381-20.473 6.463-4.984 24.91-.438 24.91-.438 0 0 8.28-9.79 11.03-16.256-4.06 8.205-13.742 15.431-23.16 11.969-6.851-2.655-17.848-.58-17.848-.58 0 0-10.649 16.848-13.713 8.547-2.297-5.373 4.072-9.02 3.324-15.316-.748-6.298-54.12-30.941-4.369-51.12" id="path8" fill="#483e37" fill-rule="evenodd"/>
   <g id="g12" f.........完整代码请登录后点击上方下载按钮下载查看