使用的是正面视角，主要是用 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. Tomcat处理请求流程

    Connector组件的Acceptor监听客户端套接字连接并接收Socket. 将连接交给线程池Executor处理,开始执行请求响应任务. Processor组件读取消息报文,解析请求行.请求体. ...

  2. 知乎TensorFlow入门学习记录

    知乎地址:https://zhuanlan.zhihu.com/p/30487008 import tensorflow as tf a=tf.placeholder(tf.int16) # 接受的数 ...

  3. 如何利用java程序实现加密所需的公钥、密钥、数字证书

    本篇的主要目的在于实现pdf的数字签名问题,只是作为我学习知识的总结. 1.数字签名算法的概述 本部分主要参考于:https://blog.csdn.net/lovelichao12/article/ ...

  4. JNI由浅入深_10_JNI 综合开发

    1.使用ndk-build时如果找不到某个类,可以使用下面两种方法解决: 1.1 进入src目录 D:\project3\JNIAndroid\src>set classpath=D:\proj ...

  5. android学习:自动识别文本文件编码格式

    /** * 判断文件的编码格式 * @param fileName :file * @return 文件编码格式 * @throws Exception */ public static String ...

  6. ibatis运行的SQL语句的输出——通过配置log4j

    将ibatis 的log4j运行级别调到DEBUG可以在控制台打印出ibatis运行的sql语句 ### 设置Logger输出级别和输出目的地 ###log4j.rootLogger=debug,st ...

  7. Eclipse中按CTRL键点击类不能进入

    是因为Eclipse或项目没有关联jdk,首先看window->preferences->java->Installed JREs,看是不是关联的你所安装的jdk,有的是关联的JRE ...

  8. GBK 文件在 sublime 保存时被强制保存为 utf-8 导致中文乱码, 恢复。

    原来在 CoverteToUTF8 的 README.zh_CN.md 文件里就有解决方法,如下: * 问:我的文件被保存为 UTF-8,而且变成了乱码,要如何恢复? 答:请打开这个文件,并确认它的编 ...

  9. transition(过渡)

    transition:过渡 渡过渡原理:原始状态a状态-向-最终结束状态b状态 格式:transition: all 1s linear; 过渡的四个参数: 1.参与过渡的属性(属性(width)/a ...

  10. Home Assistant系列 -- 设置界面语言与地理位置

    Home Assistant 安装的时候会自动根据你的系统语言设置默认语言,安装完成以后也可以根据需要自己设置选择语言.启动 Home Assistant ,浏览器打开web 界面,点击左上角的用户图 ...