TweenMax实现球体光环三维旋转效果代码-html代码-BFW代码库

TweenMax实现球体光环三维旋转效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax实现球体光环三维旋转效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oswald'>

  
<style>
body{
  background-color: #151515; 
  background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
  background-size:50px 50px;
  overflow:hidden;
}

#textS{ 
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:'Oswald', tahoma; font-size:45vw;
  text-align:center; white-space: nowrap;
  opacity:0.4;
}

#container{ 
  width:275px; height:275px;  
  position :absolute; 
  left:50%; top:50%; transform: translate(-50%,-50%);
  border:7px solid rgba(0,0,0,0.8);
  border-radius:50%;
  box-shadow: 0px 0px 30px 0px orange , 0px 0px 150px 0px #00fc6e , inset 0px 0px 50px 0px rgba(0,0,0,0.7) ;
  background:rgba(255,255,255,0.2);
}

.R-T , .R-D{
  width:300px; height:300px;
  position:absolute;
  left:50%; top:50%; transform: translate(-50%,-50%);
  opacity:0.8;
  overflow:visible;
  z-index:1;
}

.R-T {clip:rect(0px 300px 150px 0px);   }
.R-D {clip:rect(150px 300px 300px 0px);  }

#core{
  line-height:160px;
  text-align:center; color:white;
  font-size:35px; font-family:'Oswald', tahoma; 
  position:absolute;
  left:50%; top:50%;
  width:160px; height:160px;
  background-color:#008445;
  border-radius:50%;
  transform: translate(-50%,-50%);
  z-index:1;
  box-shadow: inset 0px -10px 2px 5px rgba(0,0,0,0.3) , inset 0px 0px 50px 0px rgba(0,0,0,0.5) ;
 .........完整代码请登录后点击上方下载按钮下载查看