使用的是正面视角，主要是用 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. VIM之模式

    1.模式介绍: 在真正开始使用VIM之前,你必须先了解VIM的模式,否则在 VIM 面前你可能会手足无措.VIM是有模式 编辑器,这意味着 VIM 有多种不同的工作模式,在不同的工作模式下用户相同的操 ...

  2. shell脚本进阶 详解及其实例（一）

    v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...

  3. struts2的动态方法调用（DMI）和通配符映射

    动态方法调用   1.Struts2默认关闭DMI功能,需要使用需要手动打开,配置常量 struts.enable.DynamicMethodInvocation = true 2.使用“!”方法,即 ...

  4. git删除指定文件夹

    1.在本地仓库删除指定文件 git rm 文件名名称 2.在本地仓库删除指定文件夹 git rm -r 文件夹/ 3.提交修改 git commit -m"删除文件夹" 4.推送到 ...

  5. ABAP术语-ABAP 术语发布结束

    ABAP 术语发布结束 原文:http://www.cnblogs.com/qiangsheng/archive/2008/03/21/1116236.html 经历了大约三个月,终于把 BC417 ...

  6. jQuery笔记: 基本概念与jQuery核心

    目录 初识jQuery 为什么要使用jQuery? 如何使用jQuery? jQuery与js加载模式不同 jQuery入口函数的四种写法 jQuery的访问符冲突问题 jQuery核心函数和jQue ...

  7. JS变量、作用域、内存

    写到这个题目<JS变量.作用域,内存>,我就不由自主想起了黄金三嫖客.可能是名字有点像,嗯,一定是这样子的! JS接触下来,应该是要比Java简单不少的,所以,要学好啊.立个flag半年后 ...

  8. pdf.js 打印出错

    两种方法:1.使用0.8.223版本的pdf.js2.viewer.js中 line 3642 PRINT_OUTPUT_SCALE=1,line 3639 pdfPage.getViewPort(2 ...

  9. C# 操作word 模板 值 替换

    1.引用 aspose.words   dll 2.word 使用doc 3.给word 模板中添加要替换位置的 书签 .引用 aspose.words dll .word 使用doc .给word ...

  10. Delphi XE10.1 引用计数

      以往的Delphi版本,不支持接口的Weak,和UnSafe的引用,支持对象的Weak, UnSafe,而且仅在Android和Ios平台上支持. 现在Delphi XE10.1 Berlin终于 ...