three实现三维宇宙星云星河星系旋转动画效果代码-html代码-BFW代码库

three实现三维宇宙星云星河星系旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维宇宙星云星河星系旋转动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
	<meta charset="UTF-8">
<style>
     
body{
  margin:0;
  background-color:#000;
}
canvas{
  cursor:grab;
  cursor:-webkit-grab;
  cursor:-moz-grab;
}
canvas:active{
  cursor:grabbing;
  cursor:-webkit-grabbing;
  cursor:-moz-grabbing;
}
a.twitter, a.more{
  position:absolute;
  bottom:40px;
  right:10px;
  font-family:Arial;
  color:#33c;
  margin-right:-500px;
  transition:margin-right 500ms ease;
}
p{
  margin:3px;
  position:relative;
  font:normal 15px Arial;
}
p.shadow{
  text-shadow:1px 1px 2px #000 ;
}
div.layout{
  top:-250px;
  width:100%;
  position:absolute;
  transition:top 500ms ease;
}
#instruction{
  z-index:1;
  color:#f90;
  font-family:Arial;
  padding:9px 0 5px 0;
  background-color:darkslategrey;
  top:100%;
  width:50%;
  position:absolute;
  left:25%;
  opacity:.8;
  border-radius:0px 0px 100px 100px;
  text-align:center;
  transition:all 500ms ease;
}
#good-person{
  cursor:pointer;
  color:#f90;
  font-family:Arial;
  padding:9px 0 5px 0;
  background-color:darkslategrey;
  bottom:-50px;
  box-shadow:0px -2px 4px black inset;
  width:50%;
  position:absolute;
  left:25%;
  opacity:.8;
  border-radius:100px 100px 0px 0px ;
  text-align:center;
  transition:all 500ms ease;
}
#info{
  border:solid 4px #444;
  border-top:none;
  border-radius:0px 0px 10px 10px;
  z-index:2;
  box-shadow:0px 5px 5px black ;
  color:#aaa;
  font-family:Arial;
  position:relative;
  text-align:center;
  padding:1px;
  top:0px;
  width:50%;
  min-width:500px;
  margin:auto;
  background:linear-gradient(-78deg ,#222 23%, #446 39%, #222 45%,#222 52%, #334 55%, #222 57%);
}
span.black{
  width:3%;
  height:7%;
  background:black;
  position:absolute;
  left:-1%;
  box-shadow:-2px 0px 5px #222 inset;
}
span.right{
  position:absolute;
  left:98%;
  box-shadow:2px 0px 5px #222 inset;
}
span.one{top:10%}
span.two{top:19%}
span.three{top:28%}
span.four{top:37%}
p.positionning{
  width:50%;
  background:#000;
  height:2px;
  text-align:left;
  margin:10px auto;
}
#timeline{
  height:2px;
  width:0%;
  position:absolute;
  top:0%;
}
.scanning{
  background:#f90;
  /*animation:scan 8s linear;*/ /* way faster on mobile without that*/
}
@keyframes scan{
  0%{
    width:0%;
    box-shadow:0px 0px 20px 5px #f90;
  }
  100%{
    width:100%;
    box-shadow:0px 0px 20px 5px #f90;
  }
}
.waiting{
  background:#3c4;
  /*animation:wait 4s infinite;*/ /*same*/
}
@keyframes wait{
  0%{
    width:100%;
    box-shadow:0px 0px 20px 3px #3c4;
  }
  50%{
    width:100%;
    box-shadow:0px 0px 0px 0px #3c4;
  }
  100%{
    width:100%;
    box-shadow:0px 0px 20px 3px #3c4;
  }
}
.warning{
  background:#f50;
  animation:warn 1s infinite;
}
@keyframes warn{
  0%{
    width:100%;
    box-shadow:0px 0px 0px 0px #f50;
  }
  50%{
    width:100%;
    box-shadow:0px 0px 20px 3px #f50;
  }
  100%{
    width:100%;
    box-shadow:0px 0px 0px 0px #f50;
  }
}
span.eye{
  width:40px;
  height:40px;
  background:-webkit-radial-gradient(orange 0% , red 20%,  black 60%, #555 61%);
  background:-moz-radial-gradient(orange 0% , red 20%,  black 60%, #555 61%);
  background:-ms-radial-gradient(orange 0% , red 20%,  black 60%, #555 61%);
  background:-o-radial-gradient(orange 0% , red 20%,  black 60%, #555 61%);
  border-radius:50%;
  position:absolute;
  left:47px;
  top:7px;
}
span.metal{
  font:bold 10px Arial;
  width:40px;
  height:40px;
  background:-webkit-radial-gradient(#777 15%,#888 35%, #666 50%,#888 55%,#555 65%);
  background:-moz-radial-gradient(#666 0% , #777 15%,.........完整代码请登录后点击上方下载按钮下载查看