TweenMax+svg实现贝塞尔曲线动画图表效果代码-html代码-BFW代码库

TweenMax+svg实现贝塞尔曲线动画图表效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现贝塞尔曲线动画图表效果代码

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

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

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

    <style>
        body,
    html {
      margin: 0;
      width: 100%;
      height: 100%;
      position: relative;
      background: #212938;
    }
    
    #parent {
      width: 300px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%) scale(1.5);
    }
    
    .graph-grid {
      opacity: 0.6;
      stroke: #C4CCFC;
      stroke-width: 1;
      stroke-linecap: round;
    }
    
    .graph-lines {
      stroke: #EDBF6E;
      stroke-width: 2;
      stroke-linecap: round;
    }
    
    .graph-points circle,
    .graph-bezier circle {
      /*stroke: #40ACBA;*/
      stroke: #EDBF6E;
      stroke-width: 2;
      fill: #212938;
    }
    
    .graph-bezier line {
      stroke: #ED5E8F;
      stroke-width: 2;
      stroke-linecap: round;
    }
    
    h1 {
      position: fixed;
      top: 50px;
      left: 50px;
      font-family: monospace;
      font-weight: 100;
      color: #EDBF6E;
    }
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="parent"></div>
    <h1 id="lambda"></h1>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script>
        // Amount of points:
var points = 9;
var speed = 5; // se.........完整代码请登录后点击上方下载按钮下载查看