CSS3实现3D地球⾃转⾏星公转
截图效果：实际效果是动态的：地球⾃西向东⾃转，⾏星绕着地球公转，轨道也会转动
HTML页⾯代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<title>CSS3星系轨道3D</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<!--<div class="earth"></div>-->
<div id="center_earth">
<div class="ui_ba u_p3d">
<div class="ball_ba u_p3d ball_c_1">
<div class="ball_huo"></div>
</div>
<div class="ball_ba u_p3d"> <!-- ball_c_1-->
<div class="earth"></div> <!--ball_c -->
</div>
<div class="ba u_p3d">
<div class="ball_c_panx"></div>
<div class="ball_c_pan"></div>
<div class="pan"></div>
<div class="pan1"></div>
<div class="pan2"></div>
<div class="guang1"></div>
<div class="guang2"></div>
<div class="guangx"></div>
<!--<div class="guangin"></div>
<div class="guangout"></div>-->
<div class="ball_ba u_p3d ball_1">
<div class="ball">MSDB<span >0.01s</span></div> </div>
<div class="ball_ba u_p3d ball_2">
<div class="ball">HXDB<span >0.02s</span></div>
</div>
<div class="ball_ba u_p3d ball_3">
<div class="ball">HXDB<span >0.03s</span></div>
</div>
<div class="ball_ba u_p3d ball_4">
<div class="ball">HXDB<span >0.04s</span></div>
</div>
<div class="ball_ba u_p3d ball_5">
<div class="ball">VIPDB<span >0.05s</span></div>
</div>
<div class="ball_ba u_p3d ball_6">
<div class="ball">ZJDB<span >0.06s</span></div>
</div>
<div class="ball_ba u_p3d ball_7">
<div class="ball" >NMADC<span >超45s 20笔</span></div>
</div>
<div class="ball_ba u_p3d ball_8">
<div class="ball" >NFBOB<span >超45s 20笔</span></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="js/index.js" ></script>
</body>
</html>
js代码：
var i = 5;
var opacLoop = tInterval(function() {
if(i<10) {
i+=0.5;
}el{
i = 5;
}
$('.ball_huo').css("opacity", i/10);
},250);
//clearInterval(opacLoop);
CSS代码：
*{
margin: 0px;
padding: 0px;
border: 0px;
}
body,html{
width: 2725px;
height: 923px;
font-family:microsoft yahei;
}
#center_earth{
width: 100%;
height: 100%;
margin-left: 20px;
background: url(../images/BG.png) no-repeat;
}
@keyframes cir1 {
0% {transform:rotateY(0deg) scale(0.9,0.9);}
25% {transform:rotateY(-90deg) scale(1,1);}
50% {transform:rotateY(-180deg) scale(0.9,0.9);}
75% {transform:rotateY(-270deg) scale(0.7,0.7);} 100% {transform:rotateY(-360deg) scale(0.9,0.9);}
}
@keyframes cir2 {
0% {transform: rotateY(-45deg) scale(0.95,0.95);} 12.5% {transform: rotateY(-90deg) scale(1,1);}
25% {transform:rotateY(-135deg) scale(0.95,0.95);} 37.5% {transform:rotateY(-180deg) scale(0.9,0.9);} 50% {transform:rotateY(-225deg) scale(0.8,0.8);}
62.5% {transform:rotateY(-270deg) scale(0.7,0.7);} 75% {transform:rotateY(-315deg) scale(0.8,0.8);}
87.2% {transform:rotateY(-360deg) scale(0.9,0.9);} 100% {transform: rotateY(-405deg) scale(0.95,0.95);} }
@keyframes cir3 {
0% {transform: rotateY(-90deg) scale(1,1);}
25% {transform:rotateY(-180deg) scale(0.9,0.9);}
50% {transform:rotateY(-270deg) scale(0.7,0.7);}
75% {transform:rotateY(-360deg) scale(0.9,0.9);} 100% {transform: rotateY(-450deg) scale(1,1);}
}
@keyframes cir4 {
0% {transform: rotateY(-135deg) scale(0.95,0.95);} 12.5% {transform: rotateY(-180deg) scale(0.9,0.9);} 25% {transform:rotateY(-225deg) scale(0.8,0.8);}
37.5%{ transform:rotateY(-270deg) scale(0.7,0.7);} 50% {transform:rotateY(-315deg) scale(0.8,0.8);}
62.5%{transform:rotateY(-360deg) scale(0.9,0.9);} 75% {transform:rotateY(-405deg) scale(0.95,0.95);} 87.5%{transform:rotateY(-450deg) scale(1,1); }
100% {transform: rotateY(-495deg) scale(0.95,0.95);} }
@keyframes cir5 {
0% {transform: rotateY(-180deg) scale(0.9,0.9);}
25% {transform:rotateY(-270deg) scale(0.7,0.7);}
50% {transform:rotateY(-360deg) scale(0.9,0.9);}
75% {transform:rotateY(-450deg) scale(1,1);}
100% {transform: rotateY(-540deg) scale(0.9,0.9);}
}
@keyframes cir6 {
0% {transform: rotateY(-225deg) scale(0.8,0.8);}
12.5%{transform: rotateY(-270deg) scale(0.7,0.7);} 25%{transform: rotateY(-315deg) scale(0.8,0.8);}
37.5%{transform: rotateY(-360deg) scale(0.9,0.9);} 50%{transform: rotateY(-405deg) scale(0.95,0.95);} 62.5%{transform: rotateY(-450deg) scale(1,1);}
75%{transform: rotateY(-495deg) scale(0.95,0.95);} 87.5%{transform: rotateY(-540deg) scale(0.9,0.9);} 100% {transform: rotateY(-585deg) scale(0.8,0.8);}
}
@keyframes cir7 {
0% {transform: rotateY(-270deg) scale(0.7,0.7);}
25%{transform: rotateY(-360deg) scale(0.9,0.9);}
50%{transform: rotateY(-450deg) scale(1,1);}
75%{transform: rotateY(-540deg) scale(0.9,0.9);}
100% {transform: rotateY(-630deg) scale(0.7,0.7);}
}
@keyframes cir8 {
0% {transform: rotateY(-315deg) scale(0.8,0.8);}
12.5%{transform: rotateY(-360deg) scale(0.9,0.9)}
25%{transform: rotateY(-405deg) scale(0.95,0.95);}
37.5%{transform: rotateY(-450deg) scale(1,1);}
50%{transform: rotateY(-495deg) scale(0.95,0.95);}
62.5%{transform: rotateY(-540deg) scale(0.9,0.9);}
75%{transform: rotateY(-585deg) scale(0.8,0.8);}
87.5%{ transform: rotateY(-630deg) scale(0.7,0.7);}
100% {transform: rotateY(-675deg) scale(0.8,0.8);}
}
@keyframes cir {
0% {transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);}
100% {transform: rotateX(80deg) rotateY(0deg) rotateZ(-360deg);} }
@keyframes cir_c_px {
0% {transform: rotateZ(0deg) ;}
100% {transform: rotateZ(-360deg) ;}
}
@keyframes cir_c_p {
0% {transform: rotateZ(0deg) ;}
100% {transform: rotateZ(-360deg) ;}
}
@keyframes cir_p {
0% {transform: rotateZ(0deg) ;}
100% {transform: rotateZ(-360deg) ;}
}
@keyframes cir_p1 {
0% {transform: rotateZ(0deg) ;}
100% {transform: rotateZ(-360deg) ;}
}
@keyframes cir_p2 {
0% {transform: rotateZ(0deg) ;}
100% {transform: rotateZ(-360deg) ;}
}
@keyframes cir_g1 {
0% {transform: rotateZ(0deg) ;}
100% {transform: rotateZ(-360deg) ;}
}
@keyframes cir_g2 {
0% {transform: rotateZ(0deg) ;}
100% {transform: rotateZ(-360deg) ;}
}
@keyframes cir_gx {
0% {transform: rotateZ(0deg) ;}
100% {transform: rotateZ(-360deg) ;}
}
.
u_p3d{transform-style: prerve-3d !important;}
.ui_ba {
position: relative;
width: 1400px;
height: 0px;
left: 24%;
top:-28%;
perspective: 6500px;
perspective-origin: 50% 0%;
}
.ba{
transform: rotateX(80deg) rotateY(-10deg); position: relative;
width: 1400px;
height: 1400px;
backface-visibility: hidden;
animation: cir 10s linear 0s infinite;
}
.ball_ba {
transform-origin: 1260px 0px;
position: absolute;
top: 700px;
left: -560px;
width: 1260px;
height: 300px;
}
.ball{
transition:all 2s ea-out 0ms;
transform-origin: 50% 50%;
position: absolute;
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
background-image: url(../images/blue.png); background-size: 100% 100%;
left: 0px;
top: 0px;
color: rgba(255, 255, 255, 0);
font-size: 12px;
opacity: 1;
overflow: hidden;
}
.ball_c {
z-index: 1;
transform-origin: 50% 50%;
position: absolute;
width: 640px;
height: 640px;
line-height: 640px;
text-align: center;
background-image: url(../images/diqiu.png); background-size: 100% 100%;
left: 986px;
top: 966px;
color: #fff;
font-size: 34px;
}
