太阳系主要利用定位，伪元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.  
  12.         html, body {
  13.             width: 100%;
  14.             height: 100%;
  15.             overflow: hidden;
  16.         }
  17.  
  18.         body {
  19.             background-color: #000;
  20.         }
  21.  
  22.         .sun {
  23.             width: 80px;
  24.             height: 80px;
  25.             border-radius: 50%;
  26.             position: absolute;
  27.             top: 50%;
  28.             left: 50%;
  29.             margin-left: -40px;
  30.             margin-top: -40px;
  31.             background-color: orange;
  32.             box-shadow: 0px 0px 30px 2px yellow;
  33.         }
  34.  
  35.         .earth {
  36.             width: 300px;
  37.             height: 300px;
  38.             border-radius: 50%;
  39.             position: absolute;
  40.             top: 50%;
  41.             left: 50%;
  42.             margin-left: -150px;
  43.             margin-top: -150px;
  44.             border: 1px solid #fff;
  45.             animation: gun 10s infinite linear;
  46.         }
  47.  
  48.         .earth::before {
  49.             content: "";
  50.             position: absolute;
  51.             width: 40px;
  52.             height: 40px;
  53.             top: 50%;
  54.             margin-top: -20px;
  55.             left: -20px;
  56.             border-radius: 50%;
  57.             background-color: blue;
  58.         }
  59.  
  60.         .moon {
  61.             position: absolute;
  62.             width: 100px;
  63.             height: 100px;
  64.             top: 50%;
  65.             margin-top: -50px;
  66.             left: -50px;
  67.             border-radius: 50%;
  68.             /*border: 1px solid #fff;*/
  69.             animation: gun 2.5s infinite linear;
  70.         }
  71.  
  72.         .moon:before {
  73.             content: "";
  74.             position: absolute;
  75.             width: 18px;
  76.             height: 18px;
  77.             top: 50%;
  78.             margin-top: -9px;
  79.             left: -9px;
  80.             border-radius: 50%;
  81.             background-color: silver;
  82.         }
  83.  
  84.         .mars {
  85.             width: 460px;
  86.             height: 460px;
  87.             border-radius: 50%;
  88.             position: absolute;
  89.             top: 50%;
  90.             left: 50%;
  91.             margin-left: -230px;
  92.             margin-top: -230px;
  93.             border: 1px solid #fff;
  94.             animation: gun 15s infinite linear;
  95.         }
  96.  
  97.         .mars::before {
  98.             content: "";
  99.             position: absolute;
  100.             width: 50px;
  101.             height: 50px;
  102.             top: 50%;
  103.             margin-top: -25px;
  104.             left: -25px;
  105.             border-radius: 50%;
  106.             background-color: orange;
  107.         }
  108.  
  109.         .venus {
  110.             width: 600px;
  111.             height: 600px;
  112.             border-radius: 50%;
  113.             position: absolute;
  114.             top: 50%;
  115.             left: 50%;
  116.             margin-left: -300px;
  117.             margin-top: -300px;
  118.             border: 1px solid #fff;
  119.             animation: gun 20s infinite linear;
  120.         }
  121.  
  122.         .venus::before {
  123.             content: "";
  124.             position: absolute;
  125.             width: 60px;
  126.             height: 60px;
  127.             top: 50%;
  128.             margin-top: -30px;
  129.             left: -30px;
  130.             border-radius: 50%;
  131.             background-color: silver;
  132.         }
  133.  
  134.         @keyframes gun {
  135.             0% {
  136.                 transform: rotate(0deg);
  137.             }
  138.             100% {
  139.                 transform: rotate(360deg);
  140.             }
  141.         }
  142.     </style>
  143. </head>
  144. <body>
  145. <div class="sun"></div>
  146. <div class="earth">
  147.     <div class="moon"></div>
  148. </div>
  149. <div class="mars"></div>
  150. <div class="venus"></div>
  151. </body>
  152. </html>

参考资料：cssRules  js操作cssRules

html5——动画案例（太阳系）的更多相关文章

  1. html5——动画案例（时钟）

    1.秒钟转360度需要60s分60步 2.分针转360度需要3600s分60步 3.秒钟转360度需要43200s分60步 <!DOCTYPE html> <html lang=&q ...

  2. html5——动画案例（无缝滚动）

    无缝滚动:是两组拼在一起的 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. html5——动画案例（大海）

    太阳的发散效果主要是利用transform: scale(1.3),将物体变大 <!DOCTYPE html> <html lang="en"> <h ...

  4. 精选19款华丽的HTML5动画和实用案例

    下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...

  5. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  6. HTML5 动画效果的多种实现方式

    HTML5 动画效果的多种实现方式 1.  CSS3 transform + transition https://www.w3.org/TR/css-transforms-1/ https://ww ...

  7. 给你推荐10款优秀的 HTML5 动画工具

    HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Sa ...

  8. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  9. HTML5动画软件工具编辑器 HTML5动画分类 工具推荐

    接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1.导出canvas动画: Flash CC(13.1).Animation.Radi 2.导出DIV+CSS3动画: HTML5 Make ...

随机推荐

  1. Ubuntu查看和写入系统日志

    一.背景 Linux将大量事件记录到磁盘上,它们大部分以纯文本形式存储在/var/log目录中.大多数日志条目通过系统日志守护进程syslogd,并被写入系统日志. Ubuntu包括以图形方式或从命令 ...

  2. 6、Java并发性和多线程-并发性与并行性

    以下内容转自http://tutorials.jenkov.com/java-concurrency/concurrency-vs-parallelism.html(使用谷歌翻译): 术语并发和并行性 ...

  3. linux下让irb实现代码自己主动补全的功能

    我不知道其它系统上irb是否有此功能,可是在ubuntu上ruby2.1.2自带的irb默认是没有代码自己主动补全功能的,这多少让人认为有所不便.事实上加上也非常easy,就是在irb里载入一个模块: ...

  4. 使用CDN

    CDN的全称是Content Delivery Network.中文直译过来是:内容交付网络. 它的主要意思是,将某些内容进行交付的网络.对于站点开发而言,我们所讲的内容通常指的是内容文件(比如jav ...

  5. 数据结构——算法之（027）（ 在O(1)时间内删除链表结点）

    [申明:本文仅限于自我归纳总结和相互交流,有纰漏还望各位指出. 联系邮箱:Mr_chenping@163.com] 题目:在O(1)时间内删除链表结点.且不知道链表头 题目分析: 1.把要删除节点的下 ...

  6. javascript 将中文符号转换成英文符号

      javascript 将中文符号转换成英文符号 CreateTime--2018年3月30日09:01:29 Author:Marydon /** * 将中文符号转换成英文符号 */ functi ...

  7. git项目创建

    1.在gitserver上创建git项目如图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill ...

  8. 《textanalytics》课程简单总结（1）：两种word relations——Paradigmatic vs. Syntagmatic

    coursera上的公开课<https://www.coursera.org/course/textanalytics>系列,讲的很不错哦. 1.两种关系:Paradigmatic vs. ...

  9. HDU 5090 Game with Pearls（二分匹配）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5090 Problem Description Tom and Jerry are playing a ...

  10. LeetCode 804. Unique Morse Code Words (唯一摩尔斯密码词)

    题目标签:String 题目给了我们 对应每一个 字母的 morse 密码,让我们从words 中 找出 有几个不同的 morse code 组合. 然后只要遍历 words,把每一个word 转换成 ...