杰晶网络

html+css3太阳系行星运转动画效果的实现代码
网页制作 2024/11/23 佚名
3 2

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

效果静态图：

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

标签：
html,css3,太阳系行星,运转
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

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

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

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

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

更新动态

友情链接

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