TweenMax+svg实现盆景水中倒影落叶动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax+svg实现盆景水中倒影落叶动画效果代码
代码标签： 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" fill="#8a0" color-rendering="auto" color-interpolation-filters="linearRGB" shape-rendering="auto" fill-rule="evenodd" image-rendering="auto" color-interpolation="sRGB" color="#000">
<path id="path14" isolation="auto" mix-blend-mode="normal" d="m546.57 275.03c1.955-1.331 5.145-1.087 5.839 1.546.018 1.726 4.089 2.503.971 4.02-1.776.765-3.424.879-3.971 2.744-2.8 1.607-6.657-.227-9.159 2.132-.948 2.025-3.81-.127-5.707.568-4.12.185-8.115 1.586-12.26 1.431-5.627-2.553-11.934 1.194-17.546-1.366-2.24-1.829-5.261.216-7.755-1.479-2.642-1.157-5.234-2.9-8.246-2.708-.924-1.298 2.986-3.221.043-2.629-2.677.083-.963-3.278 1.154-2.839 1.822.122 2.906-1.839 2.799-2.765 5.6.68 10.513-3.914 16.13-2.575 2.349 1.117 4.385-1.573 6.934-1.126 4.103-.161 8.099 1.284 12.209.998 4.12-1.949 8.311.723 12.378 1.46 2.284 1.052 5.942-1.733 6.624 1.804l-.108.408-.325.374" solid-opacity="1" solid-color="#000000"/>
<path id="path16" isolation="auto" mix-blend-mode="normal" d="m593.85 235.77c-4.577 1.855-8.914 3.8-14.05 1.421-3.462 2.758-7.06 4.684-11.377 5.763-1.361 2.22 0 3.932-3.61 2.984-4.794 1.25 1.893 4.377.735 3.684-3.512 .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0