DDR爱好者之家

html+css3太阳系行星运转动画效果的实现代码
站长资源 2024/11/23 佚名
59 1538
DDR爱好者之家 Design By 杰米

做一个太阳系八大行星的运转动画，不包括行星的卫星，所有行星围绕太阳公转，行星采用纯色，暂时没有自转。

效果静态图：

html+css3太阳系行星运转动画效果的实现代码

 

动画中包括：太阳及各行星，运行轨道，行星公转动画。

先画好草图，设计好大小和位置，根据公转周期计算好动画执行的时间。

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太阳系行星运转动画效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米