TweenMax实现三维柱状体彩色线框旋转动画效果代码

代码语言:html

所属分类:三维

代码描述:TweenMax实现三维柱状体彩色线框旋转动画效果代码

代码标签: TweenMax 三维 柱状体 彩色 线框 旋转 动画

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  text-align:center;
}

div{
  width:800px;
  height:500px;
}
</style>



</head>

<body >
  


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
      <script  >

    (function (){

      var body, stage, container;


      body = $('body');
      stage = $("<div>");
      container = $("<div>");

      stage.appendTo(body);
      container.appendTo(stage);
      
      var circleDiameter = 200;
      var numCircles = 50;
      
      /*var meta1 = "<meta content=\"minimum-scale=1, width=device-width, maximum-scale=1\, user-scalable=no\" name=\"viewport\" /> <meta name=\"apple-mobile-web-app-capable\" content=\"yes\" />";
      $(meta1).appendTo(body);*/
       

        TweenMax.set(body,
        {
            css: { 

                backgroundColor:"#000000",
                overflow:"hidden"
            }
            }
            );              


        TweenMax.set([stage],
        {
            css: { 
                /* position:"absolute", */
              top:50,
            
                    width: "100%",
                height: "100%",
                perspective: 800,
                //transformStyle:"preserve-3d",
                alpha:1,
              textAlign:'center'
            }
        });

  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0