使用的是正面视角，主要是用 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. ethereumjs/merkle-patricia-tree-2-API

    SecureTrie src/secure.js:10-15 Extends Trie 扩展前缀树 You can create a secure Trie where the keys are au ...

  2. 6 spark 存储体系 --内存管理

    6.5  memoryMode

  3. jmeter接口测试1-参数化

    jmeter一个简单的接口测试例子 1.创建一个http请求: 大概的步骤就是: (1)创建一个线程组 (2)添加HTTP信息头管理器:右键线程组,选择,添加user-Agent,key-value形 ...

  4. Unity3D-射线效果

    基于airplane_02 下面新建 Line Renderer 将上面的几个地方设置下 添加Script脚本: 脚本代码为: using System.Collections; using Syst ...

  5. Linux Notes | Linux常用命令行笔记

    [ show all running processes ] (1) ps -aux | less 'ps' means: Process Status The -a option tells ps ...

  6. CSS3中为什么要清除浮动以及三种清除浮动（float）的方法

    方法一:添加新的元素 .应用 clear:both .clear{ clear:both; height: 0; height: 0; overflow:hidden; } 方法二:父级div定义 o ...

  7. initUrl方法

    private String initUrl(String preurl,String taskurl) { if(JavaUtil.match(taskurl, "/[a-z]+$&quo ...

  8. Mysql实现主从同步

    根据网上众多参考案例,继续在VM虚拟机里实现MySQL主从同步功能.步骤如下: * 首先明确下环境 主库本地windows ip192.168.0.103 从库虚拟机mysql5.6 ip192.16 ...

  9. .net core 实践笔记（二）--EF连接Azure Sql

    ** 温馨提示:如需转载本文,请注明内容出处.** 本文链接:https://www.cnblogs.com/grom/p/9902098.html 笔者使用了常见的三层架构,Api展示层注入了Swa ...

  10. TCL-事务

    一.含义事务:一条或多条sql语句组成一个执行单位,一组sql语句要么都执行要么都不执行二.特点(ACID)A 原子性:一个事务是不可再分割的整体,要么都执行要么都不执行C 一致性:一个事务可以使数据 ...