html+css3太阳系行星运行动漫实际效果的完成编码

做1个太阳系8大行星的运行动漫，不包含行星的卫星，全部行星紧紧围绕太阳公转，行星选用单色，临时沒有自转。

实际效果静态数据图：

 

动漫中包含：太阳及各行星，运作路轨，行星公旋转画。

先画好草图，设计方案好尺寸和部位，依据公转周期测算好动漫实行的時间。

html的构造:

1个class为solarsys的div，做为太阳系器皿元素，该div的position为relative。

行星路轨和行星都用div，position为absolute。

器皿用relative和內部元素选用absolute的精准定位方法，较为简易的能完成实际效果，缺陷便是尺寸是固定不动的。

XML/HTML Code拷贝內容到剪贴板
  1. <div class="solarsys">  
  2.         <!--太阳-->  
  3.         <div class='sun'></div>  
  4.   
  5.         <!--水星路轨-->  
  6.         <div class='mercuryOrbit'></div>  
  7.   
  8.         <!--水星-->  
  9.         <div class='mercury'></div>  
  10.   
  11.         <!--金星路轨-->  
  12.         <div class='venusOrbit'></div>  
  13.   
  14.         <!--金星-->  
  15.         <div class='venus'></div>  
  16.   
  17.         <!--地球路轨-->  
  18.         <div class='earthOrbit'></div>  
  19.   
  20.         <!--地球-->  
  21.         <div class='earth'></div>  
  22.   
  23.         <!--火花路轨-->  
  24.         <div class='marsOrbit'></div>  
  25.   
  26.         <!--火花-->  
  27.         <div class='mars'></div>  
  28.   
  29.         <!--木星路轨-->  
  30.         <div class='jupiterOrbit'></div>  
  31.   
  32.         <!--木星-->  
  33.         <div class='jupiter'></div>  
  34.   
  35.         <!--土星路轨-->  
  36.         <div class='saturnOrbit'></div>  
  37.   
  38.         <!--土星-->  
  39.         <div class='saturn'></div>  
  40.   
  41.         <!--天王星路轨-->  
  42.         <div class='uranusOrbit'></div>  
  43.   
  44.         <!--天王星-->  
  45.         <div class='uranus'></div>  
  46.   
  47.         <!--海王星路轨-->  
  48.         <div class='neptuneOrbit'></div>  
  49.   
  50.         <!--海王星-->  
  51.         <div class='neptune'></div>  
  52.     </div>  

太阳系器皿div的css：

定宽，定高，relative精准定位，网页页面内剧中对齐。

CSS Code拷贝內容到剪贴板
  1. .solarsys{   
  2.             width: 800px;   
  3.             height: 800px;;   
  4.             position: relative;   
  5.             margin: 0 auto;   
  6.             background-color: #000000;   
  7.             padding: 0;   
  8.             transform: scale(1);   
  9.         }  

太阳div的css：

依照设计方案的尺寸和部位，设置宽高，left，top。

设置色调。

根据把boder-radius转化成50%，把1个正方变形成圆形。

根据box-shadow的4层色调设定完成太阳光晕。

CSS Code拷贝內容到剪贴板
  1. .sun {   
  2.             left:357px;   
  3.             top:357px;   
  4.             height: 90px;   
  5.             width: 90px;   
  6.             background-color: rgb(248,107,35);   
  7.             border-radius: 50%;   
  8.             box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);   
  9.             position: absolute;   
  10.             margin: 0;   
  11.         }  

行星路轨div的css：

假定是水星路轨。

依照设计方案的尺寸和部位，设置宽高，left，top。

情况色全透明。

根据把boder-radius转化成50%，把1个正方变形成圆形。

boder的种类设成虚线。

boder的色调设成灰色。

宽度设1。

CSS Code拷贝內容到剪贴板
  1. .mercuryOrbit {   
  2.             left:342.5px;   
  3.             top:342.5px;   
  4.             height: 115px;   
  5.             width: 115px;   
  6.             background-color: transparent;   
  7.             border-radius: 50%;   
  8.             border-style: dashed;   
  9.             border-color: gray;   
  10.             position: absolute;   
  11.             border-width: 1px;   
  12.             margin: 0px;   
  13.             padding: 0px;   
  14.         }  

行星div的css：

假定是水星。

依照设计方案的尺寸和部位，设置宽高，left，top。

设定色调。

根据把boder-radius转化成50%，把1个正方变形成圆形。

将transfrom-origin设置成当今div的左上角相对全部太阳系器皿的管理中心点的横向和纵向的偏位量。再加转动动漫后便是紧紧围绕着管理中心点转动实际效果。 

做1个animation，引入rotate重要帧动漫，线形永久性实行，这里的实行时长是依据行星的公转周期测算出来。

CSS Code拷贝內容到剪贴板
  1. .mercury {   
  2.             left:337.5px;   
  3.             top:395px;   
  4.             height: 10px;   
  5.             width: 10px;   
  6.             background-color: rgb(166,138,56);   
  7.             border-radius: 50%;   
  8.             position: absolute;   
  9.             transform-origin: 62.5px 5px;   
  10.             animation: rotate 1.5s infinite linear;   
  11.         }  

rotate重要帧动漫：

逆时针转动。

CSS Code拷贝內容到剪贴板
  1. @keyframes rotate {   
  2.             100% {   
  3.                 transform: rotate(⑶60deg);   
  4.             }   
  5.         }  

基础构造进行。

仅在chrome中检测过。

 

所有编码：

XML/HTML Code拷贝內容到剪贴板
  1. <html>  
  2. <head>  
  3.     <style>  
  4.         .solarsys{   
  5.             width: 800px;   
  6.             height: 800px;;   
  7.             position: relative;   
  8.             margin: 0 auto;   
  9.             background-color: #000000;   
  10.             padding: 0;   
  11.             transform: scale(1);   
  12.         }   
  13.   
  14.         /*太阳*/   
  15.         .sun {   
  16.             left:357px;   
  17.             top:357px;   
  18.             height: 90px;   
  19.             width: 90px;   
  20.             background-color: rgb(248,107,35);   
  21.             border-radius: 50%;   
  22.             box-shadow: 5px 5px 10px rgb(248,107,35), ⑸px ⑸px 10px rgb(248,107,35), 5px ⑸px 10px rgb(248,107,35), ⑸px 5px 10px rgb(248,107,35);   
  23.             position: absolute;   
  24.             margin: 0;   
  25.         }   
  26.   
  27.         /*水星*/   
  28.         .mercury {   
  29.             left:337.5px;   
  30.             top:395px;   
  31.             height: 10px;   
  32.             width: 10px;   
  33.             background-color: rgb(166,138,56);   
  34.             border-radius: 50%;   
  35.             position: absolute;   
  36.             transform-origin: 62.5px 5px;   
  37.             animation: rotate 1.5s infinite linear;   
  38.         }   
  39.   
  40.         /*水星路轨*/   
  41.         .mercuryOrbit {   
  42.             left:342.5px;   
  43.             top:342.5px;   
  44.             height: 115px;   
  45.             width: 115px;   
  46.             background-color: transparent;   
  47.             border-radius: 50%;   
  48.             border-style: dashed;   
  49.             border-color: gray;   
  50.             position: absolute;   
  51.             border-width: 1px;   
  52.             margin: 0px;   
  53.             padding: 0px;   
  54.         }   
  55.   
  56.         /*金星*/   
  57.         .venus {   
  58.             left:309px;   
  59.             top:389px;   
  60.             height: 22px;   
  61.             width: 22px;   
  62.             background-color: rgb(246,157,97);   
  63.             border-radius: 50%;   
  64.             position: absolute;   
  65.             transform-origin: 91px 11px;   
  66.             animation: rotate 3.84s infinite linear;   
  67.         }   
  68.   
  69.         /*金星路轨*/   
  70.         .venusOrbit {   
  71.             left:320px;   
  72.             top:320px;   
  73.             height: 160px;   
  74.             width: 160px;   
  75.             background-color: transparent;   
  76.             border-radius: 50%;   
  77.             border-style: dashed;   
  78.             border-color: gray;   
  79.             position: absolute;   
  80.             border-width: 1px;   
  81.             /*margin: 100px;*/   
  82.             /*transform-origin: ⑺5px ⑺5px;*/   
  83.             /*animation: rotate 4s infinite linear;*/   
  84.             margin: 0px;   
  85.             padding: 0px;   
  86.         }   
  87.   
  88.         /*地球*/   
  89.         .earth {   
  90.             left:266.5px;   
  91.             top:391px;   
  92.             height: 18px;   
  93.             width: 18px;   
  94.             background-color: rgb(115,114,174);   
  95.             border-radius: 50%;   
  96.             position: absolute;   
  97.             transform-origin: 134px 9px;   
  98.             animation: rotate 6.25s infinite linear;   
  99.         }   
  100.   
  101.         /*地球路轨*/   
  102.         .earthOrbit {   
  103.             left:275px;   
  104.             top:275px;   
  105.             height: 250px;   
  106.             width: 250px;   
  107.             background-color: transparent;   
  108.             border-radius: 50%;   
  109.             border-style: dashed;   
  110.             border-color: gray;   
  111.             position: absolute;   
  112.             border-width: 1px;   
  113.             /*margin: 100px;*/   
  114.             /*transform-origin: ⑺5px ⑺5px;*/   
  115.             /*animation: rotate 4s infinite linear;*/   
  116.             margin: 0px;   
  117.             padding: 0px;   
  118.         }   
  119.   
  120.         /*火花*/   
  121.         .mars {   
  122.             left:222.5px;   
  123.             top:392.5px;   
  124.             height: 15px;   
  125.             width: 15px;   
  126.             background-color: rgb(140,119,63);   
  127.             border-radius: 50%;   
  128.             position: absolute;   
  129.             transform-origin: 177.5px 7.5px;   
  130.             animation: rotate 11.75s infinite linear;   
  131.         }   
  132.   
  133.          /*火花路轨*/   
  134.         .marsOrbit {   
  135.             left:230px;   
  136.             top:230px;   
  137.             height: 340px;   
  138.             width: 340px;   
  139.             background-color: transparent;   
  140.             border-radius: 50%;   
  141.             border-style: dashed;   
  142.             border-color: gray;   
  143.             position: absolute;   
  144.             border-width: 1px;   
  145.             /*margin: 100px;*/   
  146.             /*transform-origin: ⑺5px ⑺5px;*/   
  147.             /*animation: rotate 4s infinite linear;*/   
  148.             margin: 0px;   
  149.             padding: 0px;   
  150.         }   
  151.   
  152.         /*木星*/   
  153.         .jupiter {   
  154.             left:134px;   
  155.             top:379px;   
  156.             height: 42px;   
  157.             width: 42px;   
  158.             background-color: rgb(156,164,143);   
  159.             border-radius: 50%;   
  160.             position: absolute;   
  161.             transform-origin: 266px 21px;   
  162.             animation: rotate 74.04s infinite linear;   
  163.         }   
  164.   
  165.         /*木星路轨*/   
  166.         .jupiterOrbit {   
  167.             left:155px;   
  168.             top:155px;   
  169.             height: 490px;   
  170.             width: 490px;   
  171.             background-color: transparent;   
  172.             border-radius: 50%;   
  173.             border-style: dashed;   
  174.             border-color: gray;   
  175.             position: absolute;   
  176.             border-width: 1px;   
  177.             /*margin: 100px;*/   
  178.             /*transform-origin: ⑺5px ⑺5px;*/   
  179.             /*animation: rotate 4s infinite linear;*/   
  180.             margin: 0px;   
  181.             padding: 0px;   
  182.         }   
  183.   
  184.         /*土星*/   
  185.         .saturn {   
  186.             left:92px;   
  187.             top:387px;   
  188.             height: 26px;   
  189.             width: 26px;   
  190.             background-color: rgb(215,171,68);   
  191.             border-radius: 50%;   
  192.             position: absolute;   
  193.             transform-origin: 308px 13px;   
  194.             animation: rotate 183.92s infinite linear;   
  195.         }   
  196.   
  197.         /*土星路轨*/   
  198.         .saturnOrbit {   
  199.             left:105px;   
  200.             top:105px;   
  201.             height: 590px;   
  202.             width: 590px;   
  203.             background-color: transparent;   
  204.             border-radius: 50%;   
  205.             border-style: dashed;   
  206.             border-color: gray;   
  207.             position: absolute;   
  208.             border-width: 1px;   
  209.             /*margin: 100px;*/   
  210.             /*transform-origin: ⑺5px ⑺5px;*/   
  211.             /*animation: rotate 4s infinite linear;*/   
  212.             margin: 0px;   
  213.             padding: 0px;   
  214.         }   
  215.   
  216.         /*天王星*/   
  217.         .uranus {   
  218.             left:41.5px;   
  219.             top:386.5px;   
  220.             height: 27px;   
  221.             width: 27px;   
  222.             background-color: rgb(164,192,206);   
  223.             border-radius: 50%;   
  224.             position: absolute;   
  225.             transform-origin: 358.5px 13.5px;   
  226.             animation: rotate 524.46s infinite linear;   
  227.         }   
  228.   
  229.         /*天王星路轨*/   
  230.         .uranusOrbit {   
  231.             left:55px;   
  232.             top:55px;   
  233.             height: 690px;   
  234.             width: 690px;   
  235.             background-color: transparent;   
  236.             border-radius: 50%;   
  237.             border-style: dashed;   
  238.             border-color: gray;   
  239.             position: absolute;   
  240.             border-width: 1px;   
  241.             /*margin: 100px;*/   
  242.             /*transform-origin: ⑺5px ⑺5px;*/   
  243.             /*animation: rotate 4s infinite linear;*/   
  244.             margin: 0px;   
  245.             padding: 0px;   
  246.         }   
  247.   
  248.         /*海王星*/   
  249.         .neptune {   
  250.             left:10px;   
  251.             top:390px;   
  252.             height: 20px;   
  253.             width: 20px;   
  254.             background-color: rgb(133,136,180);   
  255.             border-radius: 50%;   
  256.             position: absolute;   
  257.             transform-origin: 390px 10px;   
  258.             animation: rotate 1028.76s infinite linear;   
  259.         }   
  260.   
  261.         /*海王星路轨*/   
  262.         .neptuneOrbit {   
  263.             left:20px;   
  264.             top:20px;   
  265.             height: 760px;   
  266.             width: 760px;   
  267.             background-color: transparent;   
  268.             border-radius: 50%;   
  269.             border-style: dashed;   
  270.             border-color: gray;   
  271.             position: absolute;   
  272.             border-width: 1px;   
  273.             /*margin: 100px;*/   
  274.             /*transform-origin: ⑺5px ⑺5px;*/   
  275.             /*animation: rotate 4s infinite linear;*/   
  276.             margin: 0px;   
  277.             padding: 0px;   
  278.         }   
  279.   
  280.         @keyframes rotate {   
  281.             100% {   
  282.                 transform: rotate(⑶60deg);   
  283.             }   
  284.         }   
  285.   
  286.     </style>  
  287.   
  288. </head>  
  289. <body>  
  290.     <div class="solarsys">  
  291.         <!--太阳-->  
  292.         <div class='sun'></div>  
  293.   
  294.         <!--水星路轨-->  
  295.         <div class='mercuryOrbit'></div>  
  296.   
  297.         <!--水星-->  
  298.         <div class='mercury'></div>  
  299.   
  300.         <!--金星路轨-->  
  301.         <div class='venusOrbit'></div>  
  302.   
  303.         <!--金星-->  
  304.         <div class='venus'></div>  
  305.   
  306.         <!--地球路轨-->  
  307.         <div class='earthOrbit'></div>  
  308.   
  309.         <!--地球-->  
  310.         <div class='earth'></div>  
  311.   
  312.         <!--火花路轨-->  
  313.         <div class='marsOrbit'></div>  
  314.   
  315.         <!--火花-->  
  316.         <div class='mars'></div>  
  317.   
  318.         <!--木星路轨-->  
  319.         <div class='jupiterOrbit'></div>  
  320.   
  321.         <!--木星-->  
  322.         <div class='jupiter'></div>  
  323.   
  324.         <!--土星路轨-->  
  325.         <div class='saturnOrbit'></div>  
  326.   
  327.         <!--土星-->  
  328.         <div class='saturn'></div>  
  329.   
  330.         <!--天王星路轨-->  
  331.         <div class='uranusOrbit'></div>  
  332.   
  333.         <!--天王星-->  
  334.         <div class='uranus'></div>  
  335.   
  336.         <!--海王星路轨-->  
  337.         <div class='neptuneOrbit'></div>  
  338.   
  339.         <!--海王星-->  
  340.         <div class='neptune'></div>  
  341.     </div>  
  342. </body>  
  343. </html>  

以上这篇html+css3太阳系行星运行动漫实际效果的完成编码便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。