HTML5 + CSS3 实现地球绕太阳公转分析

哈哈 阅读:227 2020-02-20 18:54:10 评论:0

使用的是正面视角,主要是用 HTML5 + CSS3 来实现,JS只是用来画图。

test.html:

<!DOCTYPE html>  
<html>  
<head> 
    <meta charset="utf-8" /> 
    <title>地球-太阳自转与公转</title>  
    <link type="text/css" rel='stylesheet' href="test.css"></link>  
</head>  
<body>  
    <div class="box"> 
        <canvas id="sun" width="150px" height="150px"></canvas> 
        <canvas id="earth" width="50px" height="50px"></canvas> 
    </div> 
    <script src="test.js"></script> 
</body>  
</html>

注意<canvas>是行内置换元素,可以设置宽高和内外边距。

 

test.css:

*{ 
    margin: 0; 
    padding: 0; 
} 
.box{ 
    width: 150px; 
    height: 150px; 
    margin: 100px auto; 
    position: relative; 
    transform-style: preserve-3d; 
    /*perspective: 10000px;*/ 
    animation: sun linear 365s infinite;    /*地球公转*/ 
} 
#sun{ 
    position: absolute; 
    animation: sun linear 26.7s infinite;        /*太阳自转+误差*/ 
} 
#earth{ 
    margin: 50px; 
    position: absolute; 
    transform: translateZ(600px); 
    animation: earth linear 1s infinite;    /*地球自转*/ 
} 
@keyframes sun{ 
    from{transform: rotateY(0deg);} 
    to{transform: rotateY(360deg);} 
} 
@keyframes earth{ 
    from{transform: translateZ(600px) rotateY(0deg);} 
    to{transform: translateZ(600px) rotateY(360deg);} 
}

其中1 s = 1 天。

.box加上一个较大的 perspective 属性,想象自己漂在太空中较远处某个点观察地球和太阳;不加 perspective 属性相当于站在无穷远处观察。

 

test.js:

var sun = document.getElementById("sun").getContext('2d'), 
    earth = document.getElementById('earth').getContext('2d'), 
    gra1 = sun.createRadialGradient(75,75,0,75,75,75), 
    gra2 = earth.createRadialGradient(25,25,0,25,25,25); 
gra1.addColorStop(0,'#ffff00'); 
gra1.addColorStop(1,'#ff9900'); 
sun.arc(75,75,75,0,2 * Math.PI); 
sun.fillStyle = gra1; 
sun.fill(); 
gra2.addColorStop(0,'#78b1e8'); 
gra2.addColorStop(1,'#1c4364'); 
earth.arc(25,25,25,0,2 * Math.PI); 
earth.fillStyle = gra2; 
earth.fill();

效果图:

 

标签:CSSHTML5
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
关注我们

扫一扫关注我们,了解最新精彩内容