gsap实现小树发芽生长绿叶动画效果代码-html代码-BFW代码库

gsap实现小树发芽生长绿叶动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现小树发芽生长绿叶动画效果代码

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

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

<head>

  <meta charset="UTF-8">


  
  
<style>
.animation {
  height: 100vh;
}

.scene {
  height: 100%;
  width: 100%;
}

.btn {
  position: fixed;
  top: 15px;
  right: 30px;
  padding: 0;
  background: transparent;
  border: none;
  color: #2d3436;
  font-family: "Sacramento";
  font-size: 2rem;
}
.btn:active, .btn:focus {
  text-decoration: underline;
  border: none;
  outline: none;
}
</style>




</head>

<body>
  <div class="animation"></div>
 

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
      <script  >
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const settings = {
  colors: {
    background: "#9ab3f5",
    fill: "#a3d8f4",
    stroke: "#2d3436" },

  animation: {
    height: window.innerHeight,
    width: window.innerWidth,
    maxPlantCount: 6,
    minPlantCount: 1 },

  plant: {
    maxHeight: 0.75, // relative to the animation size
    minHeight: 0.45,
    minNodes: 3,
    maxNodes: 6,
    strokeWidth: 2 },

  durations: {
    leaf: 0.035, // relative to the element size
    stem: 0.008 },

  isAnimationOk: window.matchMedia('(prefers-reduced-motion: no-preference).........完整代码请登录后点击上方下载按钮下载查看