canvas实现立方体线条炫酷动画效果代码-html代码-BFW代码库

canvas实现立方体线条炫酷动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现立方体线条炫酷动画效果代码

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

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

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

  
  
  
  
<style>
body {
    background-color: #000;
    margin: 0;
    overflow: hidden;
}

#container {
    position: absolute;
    left: 50%;
    top: 50%;
}

canvas {
    position: absolute;
    background-color: rgba(0,0,0,0.1);
}
</style>


  
</head>

<body translate="no">
  <div id="container"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
      <script >
var mContainer = document.getElementById('container');

var mXPlanes = [],
mYPlanes = [],
mZPlanes = [],
mAllPlanes = [];

var mTrails = [];

var mPlaneSize = 300,
mDivisions = 5,
mSegmentSize = mPlaneSize / mDivisions;

window.onload = function () {
  init();
  requestAnimationFrame(loop);
};

function init() {
  TweenMax.set(mContainer, {
    perspective: 4000,
    transformStyle: 'preserve-3d' });


  createPlanes();
  createTrails();

  TweenMax.to(mContainer, 20, { ease: Linear.easeNone, rotationX: 360, rotationY: 360, repeat: -1 });
}

function createPlanes() {
  var .........完整代码请登录后点击上方下载按钮下载查看