DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> html+css3太陽系行星運轉動畫效果的實現代碼
html+css3太陽系行星運轉動畫效果的實現代碼
編輯：HTML和Xhtml     

做一個太陽系八大行星的運轉動畫，不包括行星的衛星，所有行星圍繞太陽公轉，行星采用純色，暫時沒有自轉。

效果靜態圖：

 

動畫中包括：太陽及各行星，運行軌道，行星公轉動畫。

先畫好草圖，設計好大小和位置，根據公轉周期計算好動畫執行的時間。

html的結構:

一個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%，把一個正方形變成圓形。

通過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%，把一個正方形變成圓形。

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%，把一個正方形變成圓形。

將transfrom-origin設定成當前div的左上角相對於整個太陽系容器的中心點的橫向和縱向的偏移量。加上旋轉動畫後就是圍繞著中心點旋轉效果。 

做一個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(-360deg);   
  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), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 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: -75px -75px;*/   
  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: -75px -75px;*/   
  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: -75px -75px;*/   
  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: -75px -75px;*/   
  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: -75px -75px;*/   
  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: -75px -75px;*/   
  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: -75px -75px;*/   
  275.             /*animation: rotate 4s infinite linear;*/   
  276.             margin: 0px;   
  277.             padding: 0px;   
  278.         }   
  279.   
  280.         @keyframes rotate {   
  281.             100% {   
  282.                 transform: rotate(-360deg);   
  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太陽系行星運轉動畫效果的實現代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

HTML和Xhtml
網易博客中用到的簡單網頁代碼
代碼在網易博客中的用法：首先登錄博客---
深入解析HTML的table表格標簽與相關的換行問題
何為table：table者Html表格也，數據之載體。下面是一個比較標准的table代碼寫法：XM
HTML表格標記教程(6):暗邊框色屬性BORDERCOLORDARK
在表格中，可以單獨定義右下邊框的顏色，也可以定義單元格中左上邊框的顏色，這兩個位置的邊框色我們稱之為

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
html ReadOnly 和 Enabled 區別 html 隱藏div HTML裡隱藏表格TABLE或者DIV內容的css樣式 HTML 5解析規則 a標簽的target鏈接指向iframe的方法 zen coding for editplus 實例代碼說明 探討HTML不同空格的特性與表現形式(推薦) W3C教程(10):W3C XQuery 活動 HTML5實例:20個使用HTML5編寫的網站 html 自定義標簽使用實現方法 超連接的四種狀態的應用詳細講解
熱門推薦
HTML表格標記教程(36):表頭的背景色屬性BGCOLOR 表格邊框的css語法 gbk utf8如何選擇 正確理解和使用GBK及UTF-8網頁編碼 如何正確地在XHTML文檔中使用JavaScript和CSS XHTML入門學習教程:什麼是XHTML? checkbox的indeterminate屬性使用介紹 html form表單提交action和url跳轉到actiond的區別介紹 網頁設計師學習編寫代碼的一些理由 關於label和span設置width無效問題解決方法
大家都在看
關於alt和title的用法區別詳解 HTML5 Canvas中繪制矩形實例 用XML實現編程語言間的互譯 淘寶導航菜單中的殘疾url 新的網絡產品設計:讓新手用戶快速、無痛苦地成為中間用戶 讓Div實現水平或垂直居中的相關方法 基於JS實現導航條flash導航條 js去字符串前後空格的實現方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved