使用的是正面视角，主要是用 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. math.random用法

    Math.random():获取0~1随机数 Math.floor() method rounds a number DOWNWARDS to the nearest integer, and ret ...

  2. virtualbox+vagrant学习-4-Vagrantfile-8-WinSSH

    WinSSH WinSSH通信器是专门为OpenSSH的Windows本机端口构建的.它不依赖于类posix的环境,这种环境消除了额外的软件安装(如cygwin)以获得适当功能的需求. 想获得更多的信 ...

  3. 回顾C#经典算法冒泡排序

    冒泡算法的原理: 比较相邻的两个数字,如果第一个数字比第二个数字大,则交换它们位置 从开始第一对比较到结尾最后一对,最后一个数字就是最大数 除了最后一个数字,再次从开始第一对比较到最后一对,得出第二大 ...

  4. iOS 地图相关

    参考博文:https://blog.csdn.net/zhengang007/article/details/52858198?utm_source=blogxgwz7 1.坐标系 目前常见的坐标系有 ...

  5. 【js】 ajax 与 axios 区别

    ajax 与 axios区别 Ajax: Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发 ...

  6. Centos 批量分发脚本

    ## Centos / ## #!/bin/sh file="$1" remotedir="$2" filename=$(|awk -F '/' '{print ...

  7. transform动画的一个3D的正方体盒子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 全方面了解和学习PHP框架

    PHP框架是什么?    PHP框架提供了一个用以构建web应用的基本框架,从而简化了用PHP编写web应用程序的流程.这样不但节省开发时间,有助于建立更稳定的应用,而且减少了重复编码的开发.框架还可 ...

  9. nginx 开启phpinfo

    在nginx配置文件中加 location / { //如果是资源文件,则不走phpinfo模式 if (!-e $request_filename){ ewrite ^/(.*)$ /index.p ...

  10. google网站推广被拒登如何解决

    前几天,有一客户向我们SINE安全公司反映,网站在google上的推广已拒登,说什么网站存在恶意软件或垃圾软件,导致google广告无法上线,还发现网站从google搜索点击进去会直接跳转到其他网站上 ...