gsap实现树木年轮动画效果代码-html代码-BFW代码库

gsap实现树木年轮动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现树木年轮动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        html, body, svg {
          width:100%;
          height:100%;
          margin:0;
          padding:0;
          background:#000;
        }
    </style>






</head>

<body>
    <svg id="stage" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet" stroke="none"></svg>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
    <script>
        let pts, nPts = gsap.utils.random(7,11,1)
        
        const nPoly = 25,
              radius = 180
        
        for (let i=1; i<=nPoly; i++){ //make + animate empty polygon elements
          let p = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
          stage.appendChild(p);  
          
          gsap.set(p, {
            attr:{ class:'p p'+i },
            scale:0,
            x:250,
.........完整代码请登录后点击上方下载按钮下载查看