使用的是正面视角，主要是用 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:;

    padding:;

}

.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();

效果图：

HTML5 + CSS3 实现地球绕太阳公转的更多相关文章

  1. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  2. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  3. 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  4. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  5. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  6. 04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  7. 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

  8. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  9. 08. Web大前端时代之：HTML5+CSS3入门系列~H5 Web存储

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html  

随机推荐

  1. 如何寫一個自定義控件/vs2010生成Dll文件并引用dll(C#)

    1.最簡單的例子 首先你先新建->項目->類庫.然後右鍵項目.添加一個用戶控件.設置其用戶控件繼承button. egg: namespace ClassLibrary1{    publ ...

  2. HeapAnalyzer分析工具

    HeapAnalyzer分析工具 由于jvisualvm或jmap生成的dump文件太大,常常需要用到dump文件分析工具对dump文件进行分析.HeapAnalyzer通过分析heapdump文件, ...

  3. Http_load的安装和使用

    Http_load的安装和使用 http_load基于linux平台的一种性能测工具.以并行复用的方式运行,用以测试web服务器的吞吐量与负载,测试web页面的性能. 安装: 进入工作目录:#cd / ...

  4. EF Core 中DbContext不会跟踪聚合方法和Join方法返回的结果，及FromSql方法使用讲解

    EF Core中: 如果调用Queryable.Count等聚合方法,不会导致DbContext跟踪(track)任何实体. 此外调用Queryable.Join方法返回的匿名类型也不会被DbCont ...

  5. 杂记（那些我还容易混淆的c和c++知识）

    1: 定义一个对象时先调用基类的构造函数.然后调用派生类的构造函数:析构的时候恰好相反:先调用派生类的析构函数.然后调用基类的析构函数.2:  多态性具体体现在运行和编译两个方面:在程序运行时的多态性 ...

  6. What to do next to activate this settings for already existing users

    Link: http://sharepoint.stackexchange.com/questions/89284/sharepoint-2013-mysite-increase-quota Cent ...

  7. #leetcode刷题之路22-括号生成

    给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为:[ "((()))", "(()())&q ...

  8. PyAutoGui 中遇到的KeyError : DISPLAY

    实际情形有可能是: tests/test_enlighten.py:: in <module> import re, sys, signal, logging, argparse, pya ...

  9. centos 安装 telnet

    (转)centos7安装telnet服务 场景:在进行Telnet测试时候,发现无法连接,所以还得把这个软件也安装了 1 CentOS7.0 telnet-server 启动的问题 解决方法:   先 ...

  10. Zeta--S3 Linux优化/缩短开机时间

    U-Boot1)axp20_set_ldo3实现里面把两个__msdelay(200);去掉,节省400ms2)sys_config.fex把下面的used设置为0,不使用开机指示灯闪烁,可以省掉35 ...